93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { ImageResponse } from 'next/og';
|
|
import { getTranslations } from 'next-intl/server';
|
|
|
|
export const runtime = 'edge';
|
|
|
|
export default async function Image({ params: { locale } }: { params: { locale: string } }) {
|
|
const t = await getTranslations({ locale, namespace: 'Index.meta' });
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#001a4d', // Primary Blue from Styleguide
|
|
padding: '80px',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{/* Background Pattern / Scribble placeholder */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '-100px',
|
|
right: '-100px',
|
|
width: '600px',
|
|
height: '600px',
|
|
borderRadius: '50%',
|
|
background: 'radial-gradient(circle, rgba(0,255,153,0.1) 0%, transparent 70%)',
|
|
}}
|
|
/>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
<div
|
|
style={{
|
|
fontSize: '24px',
|
|
fontWeight: 'bold',
|
|
color: '#00ff99', // Accent Green
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.2em',
|
|
marginBottom: '20px',
|
|
}}
|
|
>
|
|
KLZ Cables
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: '72px',
|
|
fontWeight: '900',
|
|
color: 'white',
|
|
lineHeight: '1.1',
|
|
maxWidth: '800px',
|
|
marginBottom: '30px',
|
|
}}
|
|
>
|
|
{t('title')}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: '32px',
|
|
color: 'rgba(255,255,255,0.7)',
|
|
maxWidth: '700px',
|
|
}}
|
|
>
|
|
{t('description')}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Accent Line */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '80px',
|
|
left: '80px',
|
|
width: '120px',
|
|
height: '8px',
|
|
backgroundColor: '#00ff99',
|
|
borderRadius: '4px',
|
|
}}
|
|
/>
|
|
</div>
|
|
),
|
|
{
|
|
width: 1200,
|
|
height: 630,
|
|
}
|
|
);
|
|
}
|