feat(og): switch to v3 geometric design with CTA

src/frontend/og-image.svg

@@ -1,58 +1,57 @@
 <svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <!--
-      Design v5: Tech/Terminal Theme
-      - Code/terminal aesthetics
-      - Monospace fonts
-      - Syntax highlighting colors
-    -->
-
-    <!-- Background -->
-    <rect width="1200" height="630" fill="#1A1333"/>
-    <rect width="1200" height="630" fill="url(#grid-pattern)" opacity="0.1"/>
     <defs>
-        <pattern id="grid-pattern" width="20" height="20" patternUnits="userSpaceOnUse">
-            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#8b5cf6" stroke-width="0.5"/>
-        </pattern>
+        <linearGradient id="bgGrad" x1="0" y1="0" x2="1200" y2="630">
+            <stop offset="0%" stop-color="#0f0a1e"/>
+            <stop offset="100%" stop-color="#1a1333"/>
+        </linearGradient>
+        <linearGradient id="accentGrad" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" stop-color="#560fd9"/>
+            <stop offset="100%" stop-color="#8b5cf6"/>
+        </linearGradient>
     </defs>
 
-    <!-- Safe Zone Guide (for reference) -->
-    <!-- <rect x="200" y="105" width="800" height="420" stroke="rgba(255,0,0,0.2)" stroke-width="1"/> -->
+    <!-- Dark Background -->
+    <rect width="1200" height="630" fill="url(#bgGrad)"/>
 
-    <!-- Content -->
-    <g style="font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', 'Consolas', 'Liberation Mono', monospace;">
+    <!-- Geometric shapes - layered -->
+    <rect x="800" y="-50" width="500" height="500" rx="40" fill="url(#accentGrad)" opacity="0.15" transform="rotate(15 1050 200)"/>
+    <rect x="850" y="50" width="400" height="400" rx="30" fill="url(#accentGrad)" opacity="0.2" transform="rotate(25 1050 250)"/>
+    <rect x="900" y="150" width="300" height="300" rx="20" fill="url(#accentGrad)" opacity="0.3" transform="rotate(35 1050 300)"/>
     
-        <!-- Top Bar -->
-        <rect x="80" y="80" width="1040" height="40" fill="#0F0A1E" rx="8"/>
-        <text x="100" y="107" fill="#8b5cf6" font-size="14" font-weight="600">FLEXINIT_STACK_DEPLOYER</text>
-        <circle cx="1000" cy="100" r="6" fill="#FF5F56"/>
-        <circle cx="1025" cy="100" r="6" fill="#FFBD2E"/>
-        <circle cx="1050" cy="100" r="6" fill="#27C93F"/>
+    <!-- Left accent line -->
+    <rect x="60" y="150" width="6" height="330" rx="3" fill="#560fd9"/>
 
-        <!-- Main Content Area -->
-        <g transform="translate(100, 180)">
-            <!-- Main Headline -->
-            <text y="40" fill="#E0E0E0" font-size="80" font-weight="700">AI Stack</text>
-            <text y="120" fill="#E0E0E0" font-size="80" font-weight="700">Deployer<tspan fill="#560fd9">_</tspan></text>
+    <!-- FLEXINIT Branding -->
+    <text x="90" y="190" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#560fd9" letter-spacing="4">
+        FLEXINIT
+    </text>
 
-            <!-- Subtitle -->
-            <text y="190" fill="#8b5cf6" font-size="24">
-                <tspan fill="#4ade80" font-weight="600">$</tspan> Deploy je AI assistent in seconden
-            </text>
+    <!-- Main Title -->
+    <text x="90" y="280" font-family="system-ui, sans-serif" font-size="68" font-weight="800" fill="#ffffff">
+        AI Stack
+    </text>
+    <text x="90" y="360" font-family="system-ui, sans-serif" font-size="68" font-weight="800" fill="#ffffff">
+        Deployer
+    </text>
 
-            <!-- CTA Button -->
-            <rect y="250" width="240" height="55" rx="6" fill="#4ade80"/>
-            <text x="35" y="285" fill="#0F0A1E" font-size="20" font-weight="700">Deploy Now &gt;</text>
-        </g>
+    <!-- Subtitle -->
+    <text x="90" y="420" font-family="system-ui, sans-serif" font-size="24" fill="rgba(255,255,255,0.7)">
+        Deploy je AI assistent in seconden
+    </text>
 
-        <!-- Decorative Code Snippet -->
-        <g transform="translate(700, 180)" font-size="16" line-height="1.5">
-            <text y="20" fill="#667085"><tspan fill="#8b5cf6">1</tspan>  <tspan fill="#f472b6">const</tspan> <tspan fill="#60a5fa">stack</tspan> <tspan fill="#f472b6">=</tspan> <tspan fill="#c084fc">await</tspan> <tspan fill="#34d399">deploy</tspan>({</text>
-            <text y="50" fill="#667085"><tspan fill="#8b5cf6">2</tspan>    <tspan fill="#60a5fa">name</tspan>: <tspan fill="#a78bfa">'my-ai-assistant'</tspan>,</text>
-            <text y="80" fill="#667085"><tspan fill="#8b5cf6">3</tspan>    <tspan fill="#60a5fa">image</tspan>: <tspan fill="#a78bfa">'opencode-v2'</tspan>,</text>
-            <text y="110" fill="#667085"><tspan fill="#8b5cf6">4</tspan>    <tspan fill="#60a5fa">domain</tspan>: <tspan fill="#a78bfa">'https://claude.ai'</tspan></text>
-            <text y="140" fill="#667085"><tspan fill="#8b5cf6">5</tspan>  });</text>
-            <text y="190" fill="#667085"><tspan fill="#8b5cf6">6</tspan>  <tspan fill="#f472b6">console</tspan>.<tspan fill="#34d399">log</tspan>(<tspan fill="#a78bfa">'✅ Stack deployed!'</tspan>);</text>
-            <text y="220" fill="#667085"><tspan fill="#8b5cf6">7</tspan>  <tspan fill="#f472b6">console</tspan>.<tspan fill="#34d399">log</tspan>(<tspan fill="#60a5fa">stack</tspan>.<tspan fill="#34d399">url</tspan>);</text>
-        </g>
+    <!-- CTA Button -->
+    <g transform="translate(90, 460)">
+        <rect x="0" y="0" width="200" height="56" rx="28" fill="#560fd9"/>
+        <text x="100" y="38" font-family="system-ui, sans-serif" font-size="22" font-weight="700" fill="#ffffff" text-anchor="middle">
+            Deploy Nu
+        </text>
+    </g>
+
+    <!-- Code snippet decoration -->
+    <g transform="translate(750, 400)" opacity="0.4">
+        <text font-family="monospace" font-size="16" fill="#8b5cf6">
+            <tspan x="0" dy="0">$ deploy --name jouwnaam</tspan>
+            <tspan x="0" dy="28" fill="#22c55e">✓ Stack ready at jouwnaam.ai.flexinit.nl</tspan>
+        </text>
     </g>
 </svg>