Seo
This commit is contained in:
@@ -0,0 +1,235 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
|
||||
<defs>
|
||||
<!-- Background gradient -->
|
||||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#7C3AED"/>
|
||||
<stop offset="100%" style="stop-color:#5B21B6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Document gradient -->
|
||||
<linearGradient id="docGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FFFFFF"/>
|
||||
<stop offset="100%" style="stop-color:#F3F4F6"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow effect for AI -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Soft shadow -->
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#000000" flood-opacity="0.25"/>
|
||||
</filter>
|
||||
|
||||
<!-- Arrow gradient -->
|
||||
<linearGradient id="arrowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#FBBF24"/>
|
||||
<stop offset="100%" style="stop-color:#F59E0B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1920" height="1080" fill="url(#bgGradient)"/>
|
||||
|
||||
<!-- Subtle pattern overlay -->
|
||||
<g opacity="0.05">
|
||||
<circle cx="200" cy="200" r="300" fill="#FFFFFF"/>
|
||||
<circle cx="1700" cy="900" r="400" fill="#FFFFFF"/>
|
||||
<circle cx="1000" cy="100" r="200" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<!-- ==================== LEFT SIDE: INPUT ==================== -->
|
||||
|
||||
<!-- Input document/card -->
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="120" y="280" width="380" height="480" rx="20" fill="url(#docGradient)"/>
|
||||
</g>
|
||||
|
||||
<!-- Input header -->
|
||||
<rect x="120" y="280" width="380" height="70" rx="20" fill="#7C3AED"/>
|
||||
<rect x="120" y="320" width="380" height="30" fill="#7C3AED"/>
|
||||
<text x="310" y="325" text-anchor="middle" fill="#FFFFFF" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="600">INPUT</text>
|
||||
|
||||
<!-- Keywords label -->
|
||||
<text x="160" y="400" fill="#6B7280" font-family="system-ui, sans-serif" font-size="18" font-weight="500">Keywords</text>
|
||||
|
||||
<!-- Keyword tags -->
|
||||
<rect x="160" y="415" width="100" height="32" rx="16" fill="#EDE9FE"/>
|
||||
<text x="210" y="437" text-anchor="middle" fill="#7C3AED" font-family="system-ui, sans-serif" font-size="14" font-weight="500">SEO</text>
|
||||
|
||||
<rect x="270" y="415" width="120" height="32" rx="16" fill="#EDE9FE"/>
|
||||
<text x="330" y="437" text-anchor="middle" fill="#7C3AED" font-family="system-ui, sans-serif" font-size="14" font-weight="500">Content</text>
|
||||
|
||||
<rect x="160" y="455" width="140" height="32" rx="16" fill="#EDE9FE"/>
|
||||
<text x="230" y="477" text-anchor="middle" fill="#7C3AED" font-family="system-ui, sans-serif" font-size="14" font-weight="500">Marketing</text>
|
||||
|
||||
<!-- Topic label -->
|
||||
<text x="160" y="530" fill="#6B7280" font-family="system-ui, sans-serif" font-size="18" font-weight="500">Topic</text>
|
||||
|
||||
<!-- Topic input box -->
|
||||
<rect x="160" y="545" width="300" height="45" rx="8" fill="#F3F4F6" stroke="#E5E7EB" stroke-width="2"/>
|
||||
<text x="180" y="575" fill="#374151" font-family="system-ui, sans-serif" font-size="16">"Product Launch Blog"</text>
|
||||
|
||||
<!-- Tone label -->
|
||||
<text x="160" y="630" fill="#6B7280" font-family="system-ui, sans-serif" font-size="18" font-weight="500">Tone</text>
|
||||
|
||||
<!-- Tone selector -->
|
||||
<rect x="160" y="645" width="140" height="40" rx="8" fill="#7C3AED"/>
|
||||
<text x="230" y="672" text-anchor="middle" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="500">Professional</text>
|
||||
|
||||
<rect x="310" y="645" width="140" height="40" rx="8" fill="#F3F4F6" stroke="#E5E7EB" stroke-width="2"/>
|
||||
<text x="380" y="672" text-anchor="middle" fill="#6B7280" font-family="system-ui, sans-serif" font-size="15">Casual</text>
|
||||
|
||||
<!-- ==================== CENTER: AI TRANSFORMATION ==================== -->
|
||||
|
||||
<!-- Flow arrow left -->
|
||||
<path d="M540 520 L620 520" stroke="url(#arrowGradient)" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<polygon points="630,520 610,508 610,532" fill="#FBBF24"/>
|
||||
|
||||
<!-- AI Brain/Magic circle -->
|
||||
<g filter="url(#glow)">
|
||||
<circle cx="810" cy="520" r="140" fill="#FFFFFF" opacity="0.15"/>
|
||||
<circle cx="810" cy="520" r="110" fill="#FFFFFF" opacity="0.25"/>
|
||||
<circle cx="810" cy="520" r="80" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<!-- AI Icon - Brain with circuit pattern -->
|
||||
<g transform="translate(810, 520)">
|
||||
<!-- Brain outline -->
|
||||
<path d="M-35 -10 C-35 -35 -15 -50 5 -50 C25 -50 40 -35 40 -15 C55 -15 60 5 50 20 C60 35 50 55 30 55 C30 55 20 60 0 60 C-20 60 -30 55 -30 55 C-50 55 -60 35 -50 20 C-60 5 -55 -15 -35 -10 Z"
|
||||
fill="none" stroke="#7C3AED" stroke-width="4"/>
|
||||
|
||||
<!-- Circuit dots -->
|
||||
<circle cx="-15" cy="-25" r="6" fill="#7C3AED"/>
|
||||
<circle cx="15" cy="-20" r="6" fill="#A78BFA"/>
|
||||
<circle cx="-5" cy="5" r="8" fill="#7C3AED"/>
|
||||
<circle cx="25" cy="10" r="6" fill="#A78BFA"/>
|
||||
<circle cx="-20" cy="25" r="6" fill="#7C3AED"/>
|
||||
<circle cx="10" cy="35" r="6" fill="#A78BFA"/>
|
||||
|
||||
<!-- Circuit lines -->
|
||||
<path d="M-15 -25 L-5 5 M15 -20 L-5 5 M-5 5 L25 10 M-5 5 L-20 25 M-5 5 L10 35"
|
||||
stroke="#7C3AED" stroke-width="2" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- AI Sparkles around brain -->
|
||||
<g filter="url(#glow)">
|
||||
<!-- Large sparkle top right -->
|
||||
<g transform="translate(920, 400)">
|
||||
<path d="M0 -25 L7 -7 L25 0 L7 7 L0 25 L-7 7 L-25 0 L-7 -7 Z" fill="#FBBF24"/>
|
||||
<circle cx="0" cy="0" r="6" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<!-- Medium sparkle top left -->
|
||||
<g transform="translate(700, 420)">
|
||||
<path d="M0 -18 L5 -5 L18 0 L5 5 L0 18 L-5 5 L-18 0 L-5 -5 Z" fill="#FBBF24"/>
|
||||
<circle cx="0" cy="0" r="4" fill="#FFFFFF"/>
|
||||
</g>
|
||||
|
||||
<!-- Small sparkle bottom -->
|
||||
<g transform="translate(850, 650)">
|
||||
<path d="M0 -15 L4 -4 L15 0 L4 4 L0 15 L-4 4 L-15 0 L-4 -4 Z" fill="#FBBF24" opacity="0.9"/>
|
||||
</g>
|
||||
|
||||
<!-- Tiny sparkles -->
|
||||
<g transform="translate(740, 600) scale(0.6)">
|
||||
<path d="M0 -15 L4 -4 L15 0 L4 4 L0 15 L-4 4 L-15 0 L-4 -4 Z" fill="#FBBF24" opacity="0.7"/>
|
||||
</g>
|
||||
<g transform="translate(900, 480) scale(0.5)">
|
||||
<path d="M0 -15 L4 -4 L15 0 L4 4 L0 15 L-4 4 L-15 0 L-4 -4 Z" fill="#FBBF24" opacity="0.8"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- "AI" label -->
|
||||
<text x="810" y="720" text-anchor="middle" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="28" font-weight="700" opacity="0.9">AI-Powered</text>
|
||||
|
||||
<!-- Flow arrow right -->
|
||||
<path d="M1000 520 L1080 520" stroke="url(#arrowGradient)" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||||
<polygon points="1090,520 1070,508 1070,532" fill="#FBBF24"/>
|
||||
|
||||
<!-- ==================== RIGHT SIDE: OUTPUT ==================== -->
|
||||
|
||||
<!-- Output document -->
|
||||
<g filter="url(#shadow)">
|
||||
<rect x="1140" y="200" width="420" height="560" rx="20" fill="url(#docGradient)"/>
|
||||
</g>
|
||||
|
||||
<!-- Output header -->
|
||||
<rect x="1140" y="200" width="420" height="70" rx="20" fill="#10B981"/>
|
||||
<rect x="1140" y="240" width="420" height="30" fill="#10B981"/>
|
||||
<text x="1350" y="245" text-anchor="middle" fill="#FFFFFF" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="600">SEO OPTIMIZED</text>
|
||||
|
||||
<!-- Generated title -->
|
||||
<rect x="1180" y="300" width="340" height="20" rx="4" fill="#7C3AED"/>
|
||||
<rect x="1180" y="330" width="280" height="14" rx="3" fill="#9CA3AF"/>
|
||||
|
||||
<!-- Content preview lines -->
|
||||
<rect x="1180" y="370" width="340" height="10" rx="3" fill="#D1D5DB"/>
|
||||
<rect x="1180" y="390" width="320" height="10" rx="3" fill="#D1D5DB"/>
|
||||
<rect x="1180" y="410" width="340" height="10" rx="3" fill="#D1D5DB"/>
|
||||
<rect x="1180" y="430" width="280" height="10" rx="3" fill="#D1D5DB"/>
|
||||
|
||||
<!-- Subheading -->
|
||||
<rect x="1180" y="465" width="200" height="16" rx="4" fill="#7C3AED" opacity="0.7"/>
|
||||
|
||||
<!-- More content lines -->
|
||||
<rect x="1180" y="495" width="340" height="10" rx="3" fill="#D1D5DB"/>
|
||||
<rect x="1180" y="515" width="300" height="10" rx="3" fill="#D1D5DB"/>
|
||||
<rect x="1180" y="535" width="340" height="10" rx="3" fill="#D1D5DB"/>
|
||||
|
||||
<!-- SEO Score Circle -->
|
||||
<g transform="translate(1470, 670)">
|
||||
<circle cx="0" cy="0" r="70" fill="#FFFFFF" stroke="#10B981" stroke-width="8"/>
|
||||
<text x="0" y="10" text-anchor="middle" fill="#10B981" font-family="system-ui, sans-serif" font-size="42" font-weight="700">92</text>
|
||||
<text x="0" y="35" text-anchor="middle" fill="#6B7280" font-family="system-ui, sans-serif" font-size="14">SEO Score</text>
|
||||
</g>
|
||||
|
||||
<!-- Mini chart bars -->
|
||||
<g transform="translate(1200, 620)">
|
||||
<rect x="0" y="40" width="25" height="60" rx="4" fill="#7C3AED"/>
|
||||
<rect x="35" y="25" width="25" height="75" rx="4" fill="#A78BFA"/>
|
||||
<rect x="70" y="10" width="25" height="90" rx="4" fill="#10B981"/>
|
||||
<rect x="105" y="30" width="25" height="70" rx="4" fill="#7C3AED"/>
|
||||
|
||||
<!-- Trend line -->
|
||||
<path d="M12 35 L47 20 L82 5 L117 25" stroke="#FBBF24" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<circle cx="82" cy="5" r="5" fill="#FBBF24"/>
|
||||
</g>
|
||||
|
||||
<!-- Checkmarks for SEO items -->
|
||||
<g transform="translate(1180, 580)">
|
||||
<circle cx="10" cy="10" r="10" fill="#10B981"/>
|
||||
<path d="M5 10 L9 14 L16 6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="30" y="15" fill="#374151" font-family="system-ui, sans-serif" font-size="13">Meta optimized</text>
|
||||
</g>
|
||||
|
||||
<!-- ==================== BOTTOM: TITLE & TAGLINE ==================== -->
|
||||
|
||||
<!-- Module name -->
|
||||
<text x="960" y="920" text-anchor="middle" fill="#FFFFFF" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="56" font-weight="700">SEO Content Generator</text>
|
||||
|
||||
<!-- Tagline -->
|
||||
<text x="960" y="980" text-anchor="middle" fill="#FFFFFF" font-family="system-ui, -apple-system, sans-serif" font-size="28" font-weight="400" opacity="0.9">AI-Powered Content Creation & Optimization for Odoo</text>
|
||||
|
||||
<!-- Decorative bottom sparkles -->
|
||||
<g transform="translate(550, 950) scale(0.4)">
|
||||
<path d="M0 -20 L5 -5 L20 0 L5 5 L0 20 L-5 5 L-20 0 L-5 -5 Z" fill="#FBBF24" opacity="0.6"/>
|
||||
</g>
|
||||
<g transform="translate(1370, 940) scale(0.35)">
|
||||
<path d="M0 -20 L5 -5 L20 0 L5 5 L0 20 L-5 5 L-20 0 L-5 -5 Z" fill="#FBBF24" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- Corner accent sparkles -->
|
||||
<g transform="translate(80, 100)">
|
||||
<path d="M0 -30 L8 -8 L30 0 L8 8 L0 30 L-8 8 L-30 0 L-8 -8 Z" fill="#FBBF24" opacity="0.5"/>
|
||||
</g>
|
||||
<g transform="translate(1840, 980)">
|
||||
<path d="M0 -25 L7 -7 L25 0 L7 7 L0 25 L-7 7 L-25 0 L-7 -7 Z" fill="#FBBF24" opacity="0.5"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
Reference in New Issue
Block a user