join_landing_vanity/assets/img/carousel/crecimiento.webp

<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>