144 lines
4.0 KiB
TypeScript
144 lines
4.0 KiB
TypeScript
import { ImageResponse } from 'next/og';
|
|
import { isLocale } from '@/i18n';
|
|
import { getSegmentData } from '@/data/segments';
|
|
|
|
export const runtime = 'edge';
|
|
export const size = { width: 1200, height: 630 };
|
|
export const contentType = 'image/png';
|
|
|
|
export default function Image({ params }: { params: { lang: string; segment: string } }) {
|
|
const lang = isLocale(params.lang) ? params.lang : 'fr';
|
|
const data = getSegmentData(params.segment);
|
|
const badge = data?.translations[lang].hero.badge ?? 'MyInfoMate';
|
|
const title = data?.meta[lang].title ?? 'MyInfoMate';
|
|
const description = data?.meta[lang].description ?? '';
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%)',
|
|
fontFamily: 'system-ui, sans-serif',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{/* Cyan glow top-left */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '-120px',
|
|
left: '-80px',
|
|
width: '600px',
|
|
height: '600px',
|
|
borderRadius: '50%',
|
|
background: 'radial-gradient(circle, rgba(13,242,223,0.18) 0%, transparent 65%)',
|
|
}}
|
|
/>
|
|
{/* Purple glow bottom-right */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '-160px',
|
|
right: '-80px',
|
|
width: '700px',
|
|
height: '700px',
|
|
borderRadius: '50%',
|
|
background: 'radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 65%)',
|
|
}}
|
|
/>
|
|
|
|
{/* Content */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
padding: '0 80px',
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
{/* Segment badge */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '10px',
|
|
padding: '10px 24px',
|
|
borderRadius: '999px',
|
|
background: 'rgba(13,242,223,0.1)',
|
|
border: '1px solid rgba(13,242,223,0.3)',
|
|
marginBottom: '36px',
|
|
}}
|
|
>
|
|
<div style={{ width: '10px', height: '10px', borderRadius: '50%', background: '#0df2df' }} />
|
|
<span
|
|
style={{
|
|
color: '#0df2df',
|
|
fontSize: '18px',
|
|
fontWeight: 700,
|
|
letterSpacing: '0.08em',
|
|
textTransform: 'uppercase',
|
|
}}
|
|
>
|
|
{badge}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Product name */}
|
|
<div
|
|
style={{
|
|
fontSize: '72px',
|
|
fontWeight: 900,
|
|
color: '#ffffff',
|
|
lineHeight: 1,
|
|
marginBottom: '28px',
|
|
letterSpacing: '-0.03em',
|
|
}}
|
|
>
|
|
MyInfoMate
|
|
</div>
|
|
|
|
{/* Page title */}
|
|
<div
|
|
style={{
|
|
fontSize: '26px',
|
|
color: '#94a3b8',
|
|
lineHeight: 1.4,
|
|
maxWidth: '860px',
|
|
marginBottom: '0px',
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 2,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{title.replace(' | MyInfoMate', '').replace(' — MyInfoMate', '')}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom URL */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '36px',
|
|
color: '#475569',
|
|
fontSize: '22px',
|
|
fontWeight: 600,
|
|
letterSpacing: '0.02em',
|
|
}}
|
|
>
|
|
myinfomate.be
|
|
</div>
|
|
</div>
|
|
),
|
|
{ ...size }
|
|
);
|
|
}
|