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.',
|
title: 'Fibe — Idea to Live App in 60 Seconds.',
|
||||||
description:
|
description:
|
||||||
'No code required. AI Genies write the code. Fibe ships it — SSL, subdomains, deploys — on DigitalOcean, AWS, GCP, Azure or any VPS.',
|
'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: {
|
twitter: {
|
||||||
card: 'summary_large_image',
|
card: 'summary_large_image',
|
||||||
@ -40,6 +49,7 @@ export const metadata = {
|
|||||||
title: 'Fibe — Idea to Live App in 60 Seconds.',
|
title: 'Fibe — Idea to Live App in 60 Seconds.',
|
||||||
description:
|
description:
|
||||||
'No code required. AI Genies write the code. Fibe ships it on your own infrastructure.',
|
'No code required. AI Genies write the code. Fibe ships it on your own infrastructure.',
|
||||||
|
images: ['https://fibe.me/opengraph-image'],
|
||||||
},
|
},
|
||||||
alternates: {
|
alternates: {
|
||||||
canonical: 'https://fibe.me',
|
canonical: 'https://fibe.me',
|
||||||
|
|||||||
@ -8,125 +8,162 @@ export const contentType = 'image/png'
|
|||||||
export default function Image() {
|
export default function Image() {
|
||||||
return new ImageResponse(
|
return new ImageResponse(
|
||||||
(
|
(
|
||||||
<div
|
<div style={{
|
||||||
style={{
|
width: 1200, height: 630,
|
||||||
background: 'linear-gradient(135deg, #0b0916 0%, #0f0c29 30%, #1a1540 60%, #1e1a42 100%)',
|
background: 'linear-gradient(145deg, #06040f 0%, #0c0820 25%, #130f35 50%, #1a1445 70%, #100c2a 100%)',
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
fontFamily: 'system-ui, -apple-system, sans-serif',
|
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
}}
|
fontFamily: 'system-ui, -apple-system, "Helvetica Neue", sans-serif',
|
||||||
>
|
}}>
|
||||||
{/* Grid overlay */}
|
|
||||||
|
{/* ── GRID ── */}
|
||||||
<div style={{
|
<div style={{
|
||||||
position: 'absolute', inset: 0,
|
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',
|
backgroundSize: '52px 52px',
|
||||||
}} />
|
}} />
|
||||||
|
|
||||||
{/* Glow orb */}
|
{/* ── GLOW ORBS ── */}
|
||||||
<div style={{
|
<div style={{
|
||||||
position: 'absolute',
|
position: 'absolute', top: -160, right: -80,
|
||||||
width: 700, height: 700,
|
width: 680, height: 680, borderRadius: '50%',
|
||||||
borderRadius: '50%',
|
background: 'radial-gradient(circle, rgba(139,92,246,0.3) 0%, rgba(99,102,241,0.12) 40%, transparent 70%)',
|
||||||
background: 'radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%)',
|
|
||||||
top: -200, right: -100,
|
|
||||||
}} />
|
}} />
|
||||||
<div style={{
|
<div style={{
|
||||||
position: 'absolute',
|
position: 'absolute', bottom: -120, left: -60,
|
||||||
width: 500, height: 500,
|
width: 480, height: 480, borderRadius: '50%',
|
||||||
borderRadius: '50%',
|
background: 'radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 65%)',
|
||||||
background: 'radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%)',
|
}} />
|
||||||
bottom: -150, left: -100,
|
{/* 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 */}
|
{/* ── MAIN LAYOUT ── */}
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative', zIndex: 1 }}>
|
<div style={{
|
||||||
|
position: 'relative', zIndex: 1,
|
||||||
|
display: 'flex', flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
padding: '52px 72px',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}}>
|
||||||
|
|
||||||
|
{/* TOP: logo + brand + badge */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<div style={{
|
<div style={{
|
||||||
width: 80, height: 80, borderRadius: 20,
|
width: 60, height: 60, borderRadius: 16,
|
||||||
background: 'linear-gradient(135deg, #8b5cf6, #a78bfa)',
|
background: 'linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%)',
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
fontSize: 42, color: 'white', fontWeight: 900,
|
fontSize: 30, color: 'white', fontWeight: 900,
|
||||||
marginBottom: 36,
|
boxShadow: '0 0 40px rgba(139,92,246,0.7), 0 0 100px rgba(139,92,246,0.25)',
|
||||||
boxShadow: '0 0 60px rgba(139,92,246,0.6)',
|
letterSpacing: '-1px',
|
||||||
}}>
|
}}>
|
||||||
f
|
f
|
||||||
</div>
|
</div>
|
||||||
|
<span style={{
|
||||||
{/* Headline */}
|
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={{
|
<div style={{
|
||||||
fontSize: 76,
|
padding: '5px 16px', borderRadius: 999,
|
||||||
fontWeight: 700,
|
border: '1px solid rgba(139,92,246,0.4)',
|
||||||
color: 'white',
|
background: 'rgba(139,92,246,0.12)',
|
||||||
letterSpacing: '-3px',
|
fontSize: 14, fontWeight: 600,
|
||||||
lineHeight: 1.05,
|
color: '#c4b5fd',
|
||||||
textAlign: 'center',
|
letterSpacing: '0.01em',
|
||||||
marginBottom: 8,
|
}}>
|
||||||
|
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.
|
Idea to live app.
|
||||||
</div>
|
</div>
|
||||||
<div style={{
|
<div style={{
|
||||||
fontSize: 76,
|
fontSize: 92, fontWeight: 800,
|
||||||
fontWeight: 700,
|
color: '#a78bfa',
|
||||||
letterSpacing: '-3px',
|
letterSpacing: '-4px', lineHeight: 0.95,
|
||||||
lineHeight: 1.05,
|
|
||||||
textAlign: 'center',
|
|
||||||
marginBottom: 36,
|
|
||||||
background: 'linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #818cf8 100%)',
|
|
||||||
backgroundClip: 'text',
|
|
||||||
color: 'transparent',
|
|
||||||
}}>
|
}}>
|
||||||
Sixty seconds.
|
Sixty seconds.
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Provider pills */}
|
{/* BOTTOM: description + pills + domain */}
|
||||||
<div style={{ display: 'flex', gap: 12 }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
||||||
{['DigitalOcean', 'AWS', 'GCP', 'Azure', 'Any VPS'].map((p) => (
|
<div style={{
|
||||||
<div key={p} style={{
|
fontSize: 22, fontWeight: 400,
|
||||||
padding: '8px 18px',
|
color: 'rgba(161,161,170,0.72)',
|
||||||
borderRadius: 999,
|
letterSpacing: '-0.2px',
|
||||||
border: '1px solid rgba(139,92,246,0.3)',
|
|
||||||
background: 'rgba(139,92,246,0.1)',
|
|
||||||
color: '#c4b5fd',
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: 500,
|
|
||||||
}}>
|
}}>
|
||||||
{p}
|
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>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Domain */}
|
{/* Domain */}
|
||||||
<div style={{
|
<div style={{
|
||||||
position: 'absolute', bottom: 36,
|
fontSize: 20,
|
||||||
fontSize: 22,
|
color: 'rgba(139,92,246,0.55)',
|
||||||
color: 'rgba(139,92,246,0.45)',
|
fontFamily: '"Courier New", Courier, monospace',
|
||||||
fontFamily: 'monospace',
|
letterSpacing: '0.04em',
|
||||||
letterSpacing: '0.05em',
|
fontWeight: 600,
|
||||||
}}>
|
}}>
|
||||||
fibe.me
|
fibe.me
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
),
|
),
|
||||||
{ ...size }
|
{ ...size }
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user