og image

components/OGImageTemplate.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+
+interface OGImageTemplateProps {
+  title: string;
+  description?: string;
+  label?: string;
+  image?: string;
+  mode?: 'dark' | 'light' | 'image';
+}
+
+export function OGImageTemplate({
+  title,
+  description,
+  label,
+  image,
+  mode = 'dark',
+}: OGImageTemplateProps) {
+  const primaryBlue = '#001a4d';
+  const accentGreen = '#82ed20';
+  const saturatedBlue = '#011dff';
+
+  const containerStyle: React.CSSProperties = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
+    padding: '80px',
+    position: 'relative',
+    fontFamily: 'Inter, sans-serif',
+  };
+
+  return (
+    <div style={containerStyle}>
+      {/* Background Image with Overlay */}
+      {image && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+          }}
+        >
+          <img
+            src={image}
+            alt=""
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              background: 'linear-gradient(to right, rgba(0,26,77,0.9) 0%, rgba(0,26,77,0.4) 100%)',
+            }}
+          />
+        </div>
+      )}
+
+      {/* Decorative Scribble Circle (Simplified for Satori) */}
+      <div
+        style={{
+          position: 'absolute',
+          top: '-100px',
+          right: '-100px',
+          width: '600px',
+          height: '600px',
+          borderRadius: '50%',
+          background: `radial-gradient(circle, ${accentGreen}1a 0%, transparent 70%)`,
+          display: 'flex',
+        }}
+      />
+
+      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
+        {/* Label / Category */}
+        {label && (
+          <div
+            style={{
+              fontSize: '24px',
+              fontWeight: 'bold',
+              color: accentGreen,
+              textTransform: 'uppercase',
+              letterSpacing: '0.2em',
+              marginBottom: '24px',
+              display: 'flex',
+            }}
+          >
+            {label}
+          </div>
+        )}
+
+        {/* Title */}
+        <div
+          style={{
+            fontSize: '72px',
+            fontWeight: '900',
+            color: 'white',
+            lineHeight: '1.1',
+            maxWidth: '900px',
+            marginBottom: '32px',
+            display: 'flex',
+          }}
+        >
+          {title}
+        </div>
+
+        {/* Description */}
+        {description && (
+          <div
+            style={{
+              fontSize: '32px',
+              color: 'rgba(255,255,255,0.8)',
+              maxWidth: '800px',
+              lineHeight: '1.4',
+              display: 'flex',
+            }}
+          >
+            {description}
+          </div>
+        )}
+      </div>
+
+      {/* Brand Footer */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '80px',
+          left: '80px',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          style={{
+            width: '120px',
+            height: '8px',
+            backgroundColor: accentGreen,
+            borderRadius: '4px',
+            marginRight: '24px',
+          }}
+        />
+        <div
+          style={{
+            fontSize: '24px',
+            fontWeight: 'bold',
+            color: 'white',
+            textTransform: 'uppercase',
+            letterSpacing: '0.1em',
+          }}
+        >
+          KLZ Cables
+        </div>
+      </div>
+
+      {/* Saturated Blue Accent */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          width: '10px',
+          height: '100%',
+          backgroundColor: saturatedBlue,
+        }}
+      />
+    </div>
+  );
+}