hero-image.svgā¢4.58 kB
<svg width="400" height="300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background gradient -->
<defs>
<linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#646cff;stop-opacity:0.05" />
<stop offset="100%" style="stop-color:#747bff;stop-opacity:0.15" />
</linearGradient>
<linearGradient id="file-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#646cff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#747bff;stop-opacity:0.8" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="400" height="300" fill="url(#bg-gradient)"/>
<!-- Large file stack (representing chunking) -->
<g transform="translate(100, 50)">
<!-- Back file -->
<rect x="20" y="20" width="180" height="200" rx="8" fill="#646cff" opacity="0.2"/>
<!-- Middle file -->
<rect x="10" y="10" width="180" height="200" rx="8" fill="#646cff" opacity="0.4"/>
<!-- Front file (main) -->
<rect x="0" y="0" width="180" height="200" rx="8" fill="url(#file-gradient)"/>
<!-- Corner fold -->
<path d="M140 0 L140 30 C140 33.3137 142.686 36 146 36 L180 36 L180 8 C180 3.58172 176.418 0 172 0 L140 0Z" fill="#646cff" opacity="0.6"/>
<!-- Lines representing file content -->
<line x1="20" y1="60" x2="160" y2="60" stroke="white" stroke-width="3" opacity="0.7"/>
<line x1="20" y1="75" x2="140" y2="75" stroke="white" stroke-width="3" opacity="0.7"/>
<line x1="20" y1="90" x2="150" y2="90" stroke="white" stroke-width="3" opacity="0.7"/>
<line x1="20" y1="105" x2="130" y2="105" stroke="white" stroke-width="3" opacity="0.6"/>
<line x1="20" y1="120" x2="155" y2="120" stroke="white" stroke-width="3" opacity="0.6"/>
<line x1="20" y1="135" x2="145" y2="135" stroke="white" stroke-width="3" opacity="0.5"/>
<line x1="20" y1="150" x2="160" y2="150" stroke="white" stroke-width="3" opacity="0.5"/>
<line x1="20" y1="165" x2="135" y2="165" stroke="white" stroke-width="3" opacity="0.4"/>
<!-- Large File text -->
<text x="90" y="35" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="white" text-anchor="middle">LARGE</text>
<text x="90" y="52" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="white" text-anchor="middle">FILE</text>
</g>
<!-- Chunk indicator -->
<g transform="translate(30, 230)">
<!-- Chunk boxes -->
<rect x="0" y="0" width="30" height="30" rx="4" fill="#646cff" opacity="0.8"/>
<rect x="35" y="0" width="30" height="30" rx="4" fill="#646cff" opacity="0.8"/>
<rect x="70" y="0" width="30" height="30" rx="4" fill="#646cff" opacity="0.8"/>
<rect x="105" y="0" width="30" height="30" rx="4" fill="#646cff" opacity="0.5"/>
<rect x="140" y="0" width="30" height="30" rx="4" fill="#646cff" opacity="0.3"/>
<!-- Labels -->
<text x="15" y="20" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle">1</text>
<text x="50" y="20" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle">2</text>
<text x="85" y="20" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle">3</text>
<text x="120" y="20" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle" opacity="0.5">4</text>
<text x="155" y="20" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle" opacity="0.3">5</text>
<text x="200" y="20" font-family="Arial, sans-serif" font-size="11" fill="#646cff" opacity="0.8">Smart Chunking</text>
</g>
<!-- Performance indicator -->
<g transform="translate(300, 80)">
<!-- Lightning bolt -->
<path d="M10 0 L0 12 L6 12 L4 24 L14 12 L8 12 Z" fill="#ffbb00" opacity="0.9"/>
<!-- Fast text -->
<text x="7" y="50" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#646cff" text-anchor="middle">Fast</text>
</g>
<!-- Search indicator -->
<g transform="translate(300, 150)">
<!-- Magnifying glass -->
<circle cx="7" cy="7" r="5" stroke="#646cff" stroke-width="2" fill="none" opacity="0.8"/>
<line x1="10" y1="10" x2="14" y2="14" stroke="#646cff" stroke-width="2" opacity="0.8"/>
<!-- Search text -->
<text x="7" y="35" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#646cff" text-anchor="middle">Search</text>
</g>
</svg>
