feat(og): update OG image with CTA design v5
This commit is contained in:
Oussama Douhou
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 66 KiB |
@@ -1,59 +1,58 @@
|
||||
<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>
|
||||
<linearGradient id="backgroundGradient" x1="0" y1="0" x2="1200" y2="630">
|
||||
<stop offset="0%" stop-color="#1e1b4b" />
|
||||
<stop offset="100%" stop-color="#312e81" />
|
||||
</linearGradient>
|
||||
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(129, 140, 248, 0.1)" stroke-width="1"/>
|
||||
<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>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="630" fill="url(#backgroundGradient)" />
|
||||
<rect width="1200" height="630" fill="url(#grid)" />
|
||||
<!-- Safe Zone Guide (for reference) -->
|
||||
<!-- <rect x="200" y="105" width="800" height="420" stroke="rgba(255,0,0,0.2)" stroke-width="1"/> -->
|
||||
|
||||
<!-- FLEXINIT Branding -->
|
||||
<text x="60" y="85" font-family="sans-serif" font-size="22" font-weight="bold" fill="rgba(255, 255, 255, 0.7)" letter-spacing="2">
|
||||
FLEXINIT AI
|
||||
</text>
|
||||
<!-- Content -->
|
||||
<g style="font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', 'Consolas', 'Liberation Mono', monospace;">
|
||||
|
||||
<!-- 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"/>
|
||||
|
||||
<!-- Main Content -->
|
||||
<g transform="translate(60, 220)">
|
||||
<!-- Title -->
|
||||
<text font-family="sans-serif" font-size="72" font-weight="bold" fill="#ffffff">
|
||||
<tspan x="0" dy="0">AI Stack</tspan>
|
||||
<tspan x="0" dy="80">Deployer</tspan>
|
||||
</text>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<text x="0" y="200" font-family="sans-serif" font-size="24" fill="rgba(224, 231, 255, 0.8)">
|
||||
Deploy your personal AI coding assistant in seconds.
|
||||
</text>
|
||||
|
||||
<!-- URL Input visualization -->
|
||||
<g transform="translate(0, 280)">
|
||||
<rect x="0" y="0" width="550" height="60" rx="8" fill="rgba(0,0,0,0.2)" />
|
||||
<text x="20" y="40" font-family="monospace" font-size="24" fill="#a5b4fc">
|
||||
yourname<tspan fill="#e0e7ff">.ai.flexinit.nl</tspan>
|
||||
<!-- Subtitle -->
|
||||
<text y="190" fill="#8b5cf6" font-size="24">
|
||||
<tspan fill="#4ade80" font-weight="600">$</tspan> Deploy je AI assistent in seconden
|
||||
</text>
|
||||
<rect x="515" y="15" width="4" height="30" fill="#6366f1">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="1s" repeatCount="indefinite" />
|
||||
</rect>
|
||||
|
||||
<!-- 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 ></text>
|
||||
</g>
|
||||
|
||||
<!-- 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>
|
||||
</g>
|
||||
|
||||
<!-- Abstract Graphic -->
|
||||
<g transform="translate(750, 100)">
|
||||
<!-- Terminal Icon -->
|
||||
<path d="M80 0 L320 0 C342.091 0 360 17.909 360 40 L360 320 C360 342.091 342.091 360 320 360 L40 360 C17.909 360 0 342.091 0 320 L0 80"
|
||||
fill="none" stroke="#6366f1" stroke-width="3" />
|
||||
<path d="M40 40 L80 80 L40 120" fill="none" stroke="#a5b4fc" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M100 115 L160 115" fill="none" stroke="#a5b4fc" stroke-width="4" stroke-linecap="round" />
|
||||
|
||||
<!-- Stack Elements -->
|
||||
<rect x="80" y="220" width="280" height="80" rx="10" fill="rgba(99, 102, 241, 0.2)" />
|
||||
<rect x="100" y="200" width="280" height="80" rx="10" fill="rgba(99, 102, 241, 0.3)" />
|
||||
<rect x="120" y="180" width="280" height="80" rx="10" fill="rgba(99, 102, 241, 0.4)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 3.4 KiB |
Reference in New Issue
Block a user