186 lines
4.3 KiB
TypeScript
186 lines
4.3 KiB
TypeScript
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',
|
|
};
|
|
|
|
return (
|
|
<div style={containerStyle}>
|
|
{/* Background Image with Overlay */}
|
|
{image && (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
display: 'flex',
|
|
}}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={image}
|
|
alt=""
|
|
width="1200"
|
|
height="630"
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
background: 'linear-gradient(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))',
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Decorative Brand Accent (Top Right) */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '-150px',
|
|
right: '-150px',
|
|
width: '600px',
|
|
height: '600px',
|
|
borderRadius: '300px',
|
|
backgroundColor: `${accentGreen}15`,
|
|
display: 'flex',
|
|
}}
|
|
/>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
|
|
{/* Label / Category */}
|
|
{label && (
|
|
<div
|
|
style={{
|
|
fontSize: '24px',
|
|
fontWeight: 700,
|
|
color: accentGreen,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.3em',
|
|
marginBottom: '32px',
|
|
display: 'flex',
|
|
}}
|
|
>
|
|
{label}
|
|
</div>
|
|
)}
|
|
|
|
{/* Title */}
|
|
<div
|
|
style={{
|
|
fontSize: title.length > 40 ? '64px' : '82px',
|
|
fontWeight: 700,
|
|
color: 'white',
|
|
lineHeight: '1.05',
|
|
maxWidth: '950px',
|
|
marginBottom: '40px',
|
|
display: 'flex',
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
{title}
|
|
</div>
|
|
|
|
{/* Description */}
|
|
{description && (
|
|
<div
|
|
style={{
|
|
fontSize: '32px',
|
|
color: 'rgba(255,255,255,0.7)',
|
|
maxWidth: '850px',
|
|
lineHeight: '1.4',
|
|
display: 'flex',
|
|
fontWeight: 400,
|
|
}}
|
|
>
|
|
{description.length > 160 ? description.substring(0, 157) + '...' : description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Brand Footer */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '80px',
|
|
left: '80px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '80px',
|
|
height: '6px',
|
|
backgroundColor: accentGreen,
|
|
borderRadius: '3px',
|
|
marginRight: '24px',
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
fontSize: '24px',
|
|
fontWeight: 700,
|
|
color: 'white',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.15em',
|
|
display: 'flex',
|
|
}}
|
|
>
|
|
KLZ Cables
|
|
</div>
|
|
</div>
|
|
|
|
{/* Saturated Blue Brand Strip */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
width: '12px',
|
|
height: '100%',
|
|
backgroundColor: saturatedBlue,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|