From a2adb0383f6349a17e3f7772e558a79dc51f0904 Mon Sep 17 00:00:00 2001
From: vyakymenko <rayfesoul@gmail.com>
Date: Thu, 23 Apr 2026 11:03:04 +0000
Subject: [PATCH] Premium OG image redesign + explicit og:image/twitter:image
 URLs for all platforms

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/layout.jsx          |  10 ++
 app/opengraph-image.jsx | 247 +++++++++++++++++++++++-----------------
 2 files changed, 152 insertions(+), 105 deletions(-)

diff --git a/app/layout.jsx b/app/layout.jsx
index 9ae1f90..f0577e8 100644
--- a/app/layout.jsx
+++ b/app/layout.jsx
@@ -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',
diff --git a/app/opengraph-image.jsx b/app/opengraph-image.jsx
index c8a2c1e..69baafa 100644
--- a/app/opengraph-image.jsx
+++ b/app/opengraph-image.jsx
@@ -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>
     ),