mirror of
https://github.com/marcogll/join_landing_vanity.git
synced 2026-01-13 13:25:15 +00:00
Initial commit: Landing page for partners
This commit is contained in:
Marco Gallegos
128
assets/img/carousel/crecimiento.webp
Normal file
128
assets/img/carousel/crecimiento.webp
Normal file
@@ -0,0 +1,128 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="growthBg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#f5e6f5;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="successGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#A39660;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#4D3F3C;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="600" height="400" fill="url(#growthBg)"/>
|
||||
|
||||
<!-- Growth journey visualization -->
|
||||
|
||||
<!-- Career progression steps -->
|
||||
<g transform="translate(50,150)">
|
||||
<!-- Step 1: Junior -->
|
||||
<circle cx="50" cy="50" r="25" fill="#f5deb3"/>
|
||||
<path d="M30 35 Q50 20 70 35 Q70 45 65 55 Q50 65 35 55 Q25 45 30 35 Z" fill="#8b4513"/>
|
||||
<circle cx="45" cy="45" r="2" fill="#2d2d2d"/>
|
||||
<circle cx="55" cy="45" r="2" fill="#2d2d2d"/>
|
||||
<path d="M47 52 Q50 55 53 52" stroke="#d2691e" stroke-width="1" fill="none"/>
|
||||
|
||||
<rect x="35" y="75" width="30" height="40" rx="5" fill="#A39660"/>
|
||||
<text x="50" y="125" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">Junior</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow progression -->
|
||||
<path d="M150 200 L200 200" stroke="#A39660" stroke-width="3" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<g transform="translate(200,140)">
|
||||
<!-- Step 2: Experienced -->
|
||||
<circle cx="50" cy="50" r="30" fill="#f4d1ae"/>
|
||||
<path d="M25 35 Q50 15 75 35 Q75 50 70 65 Q50 75 30 65 Q20 50 25 35 Z" fill="#8b4513"/>
|
||||
<circle cx="42" cy="45" r="3" fill="#2d2d2d"/>
|
||||
<circle cx="58" cy="45" r="3" fill="#2d2d2d"/>
|
||||
<path d="M45 55 Q50 60 55 55" stroke="#d2691e" stroke-width="1" fill="none"/>
|
||||
|
||||
<rect x="30" y="80" width="40" height="50" rx="5" fill="#4D3F3C"/>
|
||||
<rect x="33" y="83" width="34" height="44" rx="3" fill="#A39660"/>
|
||||
|
||||
<!-- Experience badge -->
|
||||
<circle cx="70" cy="90" r="8" fill="#ffd700"/>
|
||||
<text x="70" y="94" text-anchor="middle" fill="#4D3F3C" font-size="8" font-weight="bold">★</text>
|
||||
|
||||
<text x="50" y="145" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">Experta</text>
|
||||
</g>
|
||||
|
||||
<!-- Another arrow -->
|
||||
<path d="M300 200 L350 200" stroke="#A39660" stroke-width="3" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<g transform="translate(350,130)">
|
||||
<!-- Step 3: Senior/Leader -->
|
||||
<circle cx="50" cy="50" r="35" fill="url(#successGradient)" opacity="0.2"/>
|
||||
<circle cx="50" cy="50" r="30" fill="#f4d1ae"/>
|
||||
<path d="M20 35 Q50 10 80 35 Q85 55 80 75 Q50 85 20 75 Q15 55 20 35 Z" fill="#8b4513"/>
|
||||
|
||||
<!-- Confident expression -->
|
||||
<circle cx="42" cy="45" r="3" fill="#2d2d2d"/>
|
||||
<circle cx="58" cy="45" r="3" fill="#2d2d2d"/>
|
||||
<path d="M40 55 Q50 65 60 55" stroke="#d2691e" stroke-width="2" fill="none"/>
|
||||
|
||||
<!-- Leadership attire -->
|
||||
<rect x="25" y="85" width="50" height="60" rx="8" fill="#2d2d2d"/>
|
||||
<rect x="28" y="88" width="44" height="54" rx="5" fill="#4D3F3C"/>
|
||||
|
||||
<!-- Leadership badge -->
|
||||
<rect x="50" y="95" width="20" height="12" rx="2" fill="#ffd700"/>
|
||||
<text x="60" y="103" text-anchor="middle" fill="#2d2d2d" font-size="6" font-weight="bold">LEAD</text>
|
||||
|
||||
<!-- Crown/success symbol -->
|
||||
<path d="M40 25 L45 15 L50 20 L55 15 L60 25 L50 30 Z" fill="#ffd700"/>
|
||||
|
||||
<text x="50" y="160" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">Líder</text>
|
||||
</g>
|
||||
|
||||
<!-- Success metrics -->
|
||||
<g transform="translate(500,120)">
|
||||
<!-- Achievement badge -->
|
||||
<circle cx="40" cy="40" r="35" fill="#ffd700" opacity="0.3"/>
|
||||
<circle cx="40" cy="40" r="25" fill="#ffd700"/>
|
||||
<text x="40" y="32" text-anchor="middle" fill="#4D3F3C" font-size="12" font-weight="bold">5</text>
|
||||
<text x="40" y="45" text-anchor="middle" fill="#4D3F3C" font-size="8">AÑOS</text>
|
||||
<text x="40" y="55" text-anchor="middle" fill="#4D3F3C" font-size="6">CRECIMIENTO</text>
|
||||
|
||||
<text x="40" y="95" text-anchor="middle" fill="#4D3F3C" font-size="9" font-weight="bold">Trayectoria</text>
|
||||
<text x="40" y="108" text-anchor="middle" fill="#A39660" font-size="8">Exitosa</text>
|
||||
</g>
|
||||
|
||||
<!-- Growth chart/graph -->
|
||||
<g transform="translate(100,280)">
|
||||
<rect x="0" y="0" width="300" height="80" rx="5" fill="rgba(255,255,255,0.8)" stroke="#e5e5e5" stroke-width="1"/>
|
||||
|
||||
<!-- Chart bars representing growth -->
|
||||
<rect x="20" y="50" width="20" height="20" fill="#A39660" opacity="0.6"/>
|
||||
<rect x="60" y="35" width="20" height="35" fill="#A39660" opacity="0.7"/>
|
||||
<rect x="100" y="20" width="20" height="50" fill="#A39660" opacity="0.8"/>
|
||||
<rect x="140" y="10" width="20" height="60" fill="#A39660"/>
|
||||
<rect x="180" y="5" width="20" height="65" fill="#4D3F3C"/>
|
||||
|
||||
<!-- Chart labels -->
|
||||
<text x="30" y="85" text-anchor="middle" fill="#6b7280" font-size="8">Inicio</text>
|
||||
<text x="70" y="85" text-anchor="middle" fill="#6b7280" font-size="8">6m</text>
|
||||
<text x="110" y="85" text-anchor="middle" fill="#6b7280" font-size="8">1a</text>
|
||||
<text x="150" y="85" text-anchor="middle" fill="#6b7280" font-size="8">2a</text>
|
||||
<text x="190" y="85" text-anchor="middle" fill="#6b7280" font-size="8">5a</text>
|
||||
|
||||
<text x="150" y="15" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">Tu Crecimiento en Vanity</text>
|
||||
</g>
|
||||
|
||||
<!-- Arrow markers definition -->
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7"
|
||||
refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="#A39660"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Bottom inspirational message -->
|
||||
<rect x="450" y="280" width="140" height="80" rx="10" fill="rgba(77,63,60,0.1)"/>
|
||||
<text x="520" y="300" text-anchor="middle" fill="#4D3F3C" font-size="12" font-weight="bold">Tu carrera</text>
|
||||
<text x="520" y="315" text-anchor="middle" fill="#4D3F3C" font-size="12" font-weight="bold">en nuestras</text>
|
||||
<text x="520" y="330" text-anchor="middle" fill="#4D3F3C" font-size="12" font-weight="bold">manos</text>
|
||||
<text x="520" y="350" text-anchor="middle" fill="#A39660" font-size="10">✨ Crecimiento garantizado</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
Reference in New Issue
Block a user