134 lines
4.1 KiB
JavaScript
134 lines
4.1 KiB
JavaScript
import { ImageResponse } from 'next/og'
|
|
|
|
export const runtime = 'nodejs'
|
|
export const alt = 'Fibe — Idea to live app in 60 seconds. No code required.'
|
|
export const size = { width: 1200, height: 630 }
|
|
export const contentType = 'image/png'
|
|
|
|
export default function Image() {
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
background: 'linear-gradient(135deg, #0b0916 0%, #0f0c29 30%, #1a1540 60%, #1e1a42 100%)',
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{/* Grid overlay */}
|
|
<div style={{
|
|
position: 'absolute', inset: 0,
|
|
backgroundImage: 'linear-gradient(rgba(139,92,246,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.06) 1px, transparent 1px)',
|
|
backgroundSize: '52px 52px',
|
|
}} />
|
|
|
|
{/* Glow orb */}
|
|
<div style={{
|
|
position: 'absolute',
|
|
width: 700, height: 700,
|
|
borderRadius: '50%',
|
|
background: 'radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%)',
|
|
top: -200, right: -100,
|
|
}} />
|
|
<div style={{
|
|
position: 'absolute',
|
|
width: 500, height: 500,
|
|
borderRadius: '50%',
|
|
background: 'radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%)',
|
|
bottom: -150, left: -100,
|
|
}} />
|
|
|
|
{/* Content */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative', zIndex: 1 }}>
|
|
|
|
{/* Logo */}
|
|
<div style={{
|
|
width: 80, height: 80, borderRadius: 20,
|
|
background: 'linear-gradient(135deg, #8b5cf6, #a78bfa)',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
fontSize: 42, color: 'white', fontWeight: 900,
|
|
marginBottom: 36,
|
|
boxShadow: '0 0 60px rgba(139,92,246,0.6)',
|
|
}}>
|
|
f
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<div style={{
|
|
fontSize: 76,
|
|
fontWeight: 700,
|
|
color: 'white',
|
|
letterSpacing: '-3px',
|
|
lineHeight: 1.05,
|
|
textAlign: 'center',
|
|
marginBottom: 8,
|
|
}}>
|
|
Idea to live app.
|
|
</div>
|
|
<div style={{
|
|
fontSize: 76,
|
|
fontWeight: 700,
|
|
letterSpacing: '-3px',
|
|
lineHeight: 1.05,
|
|
textAlign: 'center',
|
|
marginBottom: 36,
|
|
background: 'linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #818cf8 100%)',
|
|
backgroundClip: 'text',
|
|
color: 'transparent',
|
|
}}>
|
|
Sixty seconds.
|
|
</div>
|
|
|
|
{/* Sub */}
|
|
<div style={{
|
|
fontSize: 26,
|
|
color: 'rgba(161,161,170,0.65)',
|
|
textAlign: 'center',
|
|
maxWidth: 740,
|
|
lineHeight: 1.5,
|
|
marginBottom: 40,
|
|
}}>
|
|
No code required. AI Genies build it. Fibe ships it.
|
|
</div>
|
|
|
|
{/* Provider pills */}
|
|
<div style={{ display: 'flex', gap: 12 }}>
|
|
{['DigitalOcean', 'AWS', 'GCP', 'Azure', 'Any VPS'].map((p) => (
|
|
<div key={p} style={{
|
|
padding: '8px 18px',
|
|
borderRadius: 999,
|
|
border: '1px solid rgba(139,92,246,0.3)',
|
|
background: 'rgba(139,92,246,0.1)',
|
|
color: '#c4b5fd',
|
|
fontSize: 18,
|
|
fontWeight: 500,
|
|
}}>
|
|
{p}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Domain */}
|
|
<div style={{
|
|
position: 'absolute', bottom: 36,
|
|
fontSize: 22,
|
|
color: 'rgba(139,92,246,0.45)',
|
|
fontFamily: 'monospace',
|
|
letterSpacing: '0.05em',
|
|
}}>
|
|
fibe.me
|
|
</div>
|
|
</div>
|
|
),
|
|
{ ...size }
|
|
)
|
|
}
|