wip

app/[locale]/products/[slug]/opengraph-image.tsx

@@ -1,135 +0,0 @@
-import { ImageResponse } from 'next/og';
-import { getProductBySlug } from '@/lib/mdx';
-
-export const runtime = 'nodejs';
-
-export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
-  const productSlug = slug;
-  const product = await getProductBySlug(productSlug, locale);
-
-  if (!product) {
-    return new ImageResponse(
-      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
-    );
-  }
-
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          backgroundColor: 'white',
-          padding: '60px',
-          position: 'relative',
-        }}
-      >
-        {/* Left Side: Content */}
-        <div style={{ display: 'flex', flexDirection: 'column', width: '55%' }}>
-          <div
-            style={{
-              fontSize: '20px',
-              fontWeight: 'bold',
-              color: '#001a4d',
-              textTransform: 'uppercase',
-              letterSpacing: '0.2em',
-              marginBottom: '20px',
-              opacity: 0.6,
-            }}
-          >
-            KLZ Cables | {product.frontmatter.categories[0]}
-          </div>
-          <div
-            style={{
-              fontSize: '72px',
-              fontWeight: '900',
-              color: '#001a4d',
-              lineHeight: '1.1',
-              marginBottom: '30px',
-            }}
-          >
-            {product.frontmatter.title}
-          </div>
-          <div
-            style={{
-              fontSize: '28px',
-              color: '#4a5568',
-              lineHeight: '1.4',
-            }}
-          >
-            {product.frontmatter.description}
-          </div>
-          
-          {/* Accent Line */}
-          <div
-            style={{
-              marginTop: '40px',
-              width: '100px',
-              height: '8px',
-              backgroundColor: '#00ff99',
-              borderRadius: '4px',
-            }}
-          />
-        </div>
-
-        {/* Right Side: Product Image */}
-        <div
-          style={{
-            display: 'flex',
-            width: '40%',
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-          }}
-        >
-          {product.frontmatter.images?.[0] && (
-            <img
-              src={product.frontmatter.images[0].startsWith('http') ? product.frontmatter.images[0] : `https://klz-cables.com${product.frontmatter.images[0]}`}
-              alt=""
-              style={{
-                maxWidth: '100%',
-                maxHeight: '80%',
-                objectFit: 'contain',
-              }}
-            />
-          )}
-          {/* Subtle shadow under product */}
-          <div
-            style={{
-              position: 'absolute',
-              bottom: '10%',
-              width: '60%',
-              height: '20px',
-              backgroundColor: 'rgba(0,0,0,0.05)',
-              borderRadius: '50%',
-              filter: 'blur(10px)',
-            }}
-          />
-        </div>
-
-        {/* Branding Corner */}
-        <div
-          style={{
-            position: 'absolute',
-            bottom: '40px',
-            right: '60px',
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#001a4d' }}>KLZ</div>
-          <div style={{ fontSize: '24px', fontWeight: 'normal', color: '#00ff99', marginLeft: '4px' }}>Cables</div>
-        </div>
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 630,
-    }
-  );
-}