140 lines
4.0 KiB
TypeScript
140 lines
4.0 KiB
TypeScript
import { ImageResponse } from 'next/og'
|
|
|
|
export const runtime = 'edge'
|
|
export const alt = 'SiteChangeMonitor - Website Change Detection'
|
|
export const size = { width: 1200, height: 630 }
|
|
export const contentType = 'image/png'
|
|
|
|
export default async function Image() {
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
background: '#0f172a',
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontFamily: 'sans-serif',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{/* Background Gradients/Glows */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '-20%',
|
|
left: '-10%',
|
|
width: '600px',
|
|
height: '600px',
|
|
background: 'radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(15, 23, 42, 0) 70%)',
|
|
filter: 'blur(40px)',
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '-20%',
|
|
right: '-10%',
|
|
width: '700px',
|
|
height: '700px',
|
|
background: 'radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(15, 23, 42, 0) 70%)',
|
|
filter: 'blur(60px)',
|
|
}}
|
|
/>
|
|
|
|
{/* Content Container */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 10,
|
|
padding: '40px',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
borderRadius: '24px',
|
|
background: 'rgba(30, 41, 59, 0.4)',
|
|
boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.3)',
|
|
}}
|
|
>
|
|
{/* Logo Section */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '20px',
|
|
marginBottom: '32px',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '72px',
|
|
height: '72px',
|
|
borderRadius: '18px',
|
|
background: 'linear-gradient(135deg, #06b6d4, #3b82f6)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '36px',
|
|
color: 'white',
|
|
fontWeight: 800,
|
|
boxShadow: '0 4px 12px rgba(6, 182, 212, 0.4)',
|
|
}}
|
|
>
|
|
S
|
|
</div>
|
|
<span style={{ fontSize: '56px', fontWeight: 800, color: 'white', letterSpacing: '-0.02em' }}>
|
|
SiteChangeMonitor
|
|
</span>
|
|
</div>
|
|
|
|
{/* Tagline */}
|
|
<p
|
|
style={{
|
|
fontSize: '32px',
|
|
fontWeight: 500,
|
|
color: '#cbd5e1',
|
|
maxWidth: '800px',
|
|
textAlign: 'center',
|
|
lineHeight: 1.4,
|
|
margin: '0 0 48px 0',
|
|
}}
|
|
>
|
|
Less noise. More signal.<br />
|
|
<span style={{ color: '#38bdf8' }}>Smart website change monitoring.</span>
|
|
</p>
|
|
|
|
{/* Features / Badges */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '24px',
|
|
}}
|
|
>
|
|
{['Noise Filtering', 'Visual Diffs', 'Instant Alerts'].map((feature) => (
|
|
<div
|
|
key={feature}
|
|
style={{
|
|
padding: '10px 24px',
|
|
background: 'rgba(56, 189, 248, 0.1)',
|
|
border: '1px solid rgba(56, 189, 248, 0.2)',
|
|
borderRadius: '100px',
|
|
color: '#7dd3fc',
|
|
fontSize: '20px',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{feature}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
{ ...size }
|
|
)
|
|
}
|