Premium OG image redesign + explicit og:image/twitter:image URLs for all platforms
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ceb014e9b5
commit
a2adb0383f
@ -32,6 +32,15 @@ export const metadata = {
|
||||
title: 'Fibe — Idea to Live App in 60 Seconds.',
|
||||
description:
|
||||
'No code required. AI Genies write the code. Fibe ships it — SSL, subdomains, deploys — on DigitalOcean, AWS, GCP, Azure or any VPS.',
|
||||
images: [
|
||||
{
|
||||
url: 'https://fibe.me/opengraph-image',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'Fibe — Idea to live app in 60 seconds. No code required.',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
@ -40,6 +49,7 @@ export const metadata = {
|
||||
title: 'Fibe — Idea to Live App in 60 Seconds.',
|
||||
description:
|
||||
'No code required. AI Genies write the code. Fibe ships it on your own infrastructure.',
|
||||
images: ['https://fibe.me/opengraph-image'],
|
||||
},
|
||||
alternates: {
|
||||
canonical: 'https://fibe.me',
|
||||
|
||||
@ -8,123 +8,160 @@ 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={{
|
||||
width: 1200, height: 630,
|
||||
background: 'linear-gradient(145deg, #06040f 0%, #0c0820 25%, #130f35 50%, #1a1445 70%, #100c2a 100%)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
fontFamily: 'system-ui, -apple-system, "Helvetica Neue", sans-serif',
|
||||
}}>
|
||||
|
||||
{/* ── GRID ── */}
|
||||
<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)',
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(139,92,246,0.08) 1px, transparent 1px), ' +
|
||||
'linear-gradient(90deg, rgba(139,92,246,0.08) 1px, transparent 1px)',
|
||||
backgroundSize: '52px 52px',
|
||||
}} />
|
||||
|
||||
{/* Glow orb */}
|
||||
{/* ── GLOW ORBS ── */}
|
||||
<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,
|
||||
position: 'absolute', top: -160, right: -80,
|
||||
width: 680, height: 680, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(139,92,246,0.3) 0%, rgba(99,102,241,0.12) 40%, transparent 70%)',
|
||||
}} />
|
||||
<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,
|
||||
position: 'absolute', bottom: -120, left: -60,
|
||||
width: 480, height: 480, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 65%)',
|
||||
}} />
|
||||
{/* Accent glow — center */}
|
||||
<div style={{
|
||||
position: 'absolute', top: '40%', left: '42%',
|
||||
width: 360, height: 360, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 70%)',
|
||||
}} />
|
||||
|
||||
{/* 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 */}
|
||||
{/* ── MAIN LAYOUT ── */}
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 36,
|
||||
fontSize: 22,
|
||||
color: 'rgba(139,92,246,0.45)',
|
||||
fontFamily: 'monospace',
|
||||
letterSpacing: '0.05em',
|
||||
position: 'relative', zIndex: 1,
|
||||
display: 'flex', flexDirection: 'column',
|
||||
height: '100%',
|
||||
padding: '52px 72px',
|
||||
justifyContent: 'space-between',
|
||||
}}>
|
||||
fibe.me
|
||||
|
||||
{/* TOP: logo + brand + badge */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
|
||||
{/* Logo */}
|
||||
<div style={{
|
||||
width: 60, height: 60, borderRadius: 16,
|
||||
background: 'linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 30, color: 'white', fontWeight: 900,
|
||||
boxShadow: '0 0 40px rgba(139,92,246,0.7), 0 0 100px rgba(139,92,246,0.25)',
|
||||
letterSpacing: '-1px',
|
||||
}}>
|
||||
f
|
||||
</div>
|
||||
<span style={{
|
||||
fontSize: 30, fontWeight: 700,
|
||||
color: 'rgba(255,255,255,0.92)',
|
||||
letterSpacing: '-0.5px',
|
||||
}}>
|
||||
fibe
|
||||
</span>
|
||||
{/* Separator */}
|
||||
<div style={{ width: 1, height: 28, background: 'rgba(139,92,246,0.25)', margin: '0 6px' }} />
|
||||
{/* Badge */}
|
||||
<div style={{
|
||||
padding: '5px 16px', borderRadius: 999,
|
||||
border: '1px solid rgba(139,92,246,0.4)',
|
||||
background: 'rgba(139,92,246,0.12)',
|
||||
fontSize: 14, fontWeight: 600,
|
||||
color: '#c4b5fd',
|
||||
letterSpacing: '0.01em',
|
||||
}}>
|
||||
No code required
|
||||
</div>
|
||||
<div style={{
|
||||
padding: '5px 16px', borderRadius: 999,
|
||||
border: '1px solid rgba(139,92,246,0.25)',
|
||||
background: 'rgba(139,92,246,0.07)',
|
||||
fontSize: 14, fontWeight: 600,
|
||||
color: 'rgba(196,181,253,0.65)',
|
||||
letterSpacing: '0.01em',
|
||||
}}>
|
||||
Any device · Anywhere
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MIDDLE: headline */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<div style={{
|
||||
fontSize: 92, fontWeight: 800,
|
||||
color: 'rgba(255,255,255,0.95)',
|
||||
letterSpacing: '-4px', lineHeight: 0.95,
|
||||
}}>
|
||||
Idea to live app.
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 92, fontWeight: 800,
|
||||
color: '#a78bfa',
|
||||
letterSpacing: '-4px', lineHeight: 0.95,
|
||||
}}>
|
||||
Sixty seconds.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTTOM: description + pills + domain */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
||||
<div style={{
|
||||
fontSize: 22, fontWeight: 400,
|
||||
color: 'rgba(161,161,170,0.72)',
|
||||
letterSpacing: '-0.2px',
|
||||
}}>
|
||||
AI Genies write the code. Fibe handles servers, SSL and deploys.
|
||||
On your own infrastructure. Zero DevOps.
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
{/* Feature pills */}
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
{[
|
||||
{ label: 'Claude Code', color: '#a78bfa' },
|
||||
{ label: 'Gemini CLI', color: '#34d399' },
|
||||
{ label: 'OpenAI Codex', color: '#60a5fa' },
|
||||
{ label: 'Your infra', color: '#c4b5fd' },
|
||||
{ label: 'Any cloud', color: '#c4b5fd' },
|
||||
].map(({ label, color }) => (
|
||||
<div key={label} style={{
|
||||
padding: '6px 15px', borderRadius: 999,
|
||||
border: `1px solid ${color}45`,
|
||||
background: `${color}12`,
|
||||
color, fontSize: 14, fontWeight: 600,
|
||||
}}>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Domain */}
|
||||
<div style={{
|
||||
fontSize: 20,
|
||||
color: 'rgba(139,92,246,0.55)',
|
||||
fontFamily: '"Courier New", Courier, monospace',
|
||||
letterSpacing: '0.04em',
|
||||
fontWeight: 600,
|
||||
}}>
|
||||
fibe.me
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user