mirror of
https://github.com/marcogll/join_landing_vanity.git
synced 2026-01-13 21:35:15 +00:00
Initial commit: Landing page for partners
This commit is contained in:
Marco Gallegos
93
assets/img/carousel/capacitacion.webp
Normal file
93
assets/img/carousel/capacitacion.webp
Normal file
@@ -0,0 +1,93 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="classroomBg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#f8f8f8;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="600" height="400" fill="url(#classroomBg)"/>
|
||||
|
||||
<!-- Training room setup -->
|
||||
<!-- Whiteboard/presentation area -->
|
||||
<rect x="50" y="50" width="200" height="120" rx="10" fill="#ffffff" stroke="#e5e5e5" stroke-width="2"/>
|
||||
|
||||
<!-- Training content on board -->
|
||||
<text x="150" y="80" text-anchor="middle" fill="#4D3F3C" font-size="14" font-weight="bold">Técnicas Avanzadas</text>
|
||||
<circle cx="100" cy="100" r="15" fill="#A39660" opacity="0.3"/>
|
||||
<circle cx="200" cy="100" r="15" fill="#A39660" opacity="0.3"/>
|
||||
<path d="M85 100 L115 100 M185 100 L215 100" stroke="#4D3F3C" stroke-width="2"/>
|
||||
|
||||
<!-- Steps diagram -->
|
||||
<rect x="80" y="120" width="20" height="20" rx="3" fill="#A39660"/>
|
||||
<text x="90" y="133" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="bold">1</text>
|
||||
<rect x="130" y="120" width="20" height="20" rx="3" fill="#A39660"/>
|
||||
<text x="140" y="133" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="bold">2</text>
|
||||
<rect x="180" y="120" width="20" height="20" rx="3" fill="#A39660"/>
|
||||
<text x="190" y="133" text-anchor="middle" fill="#ffffff" font-size="10" font-weight="bold">3</text>
|
||||
|
||||
<!-- Instructor -->
|
||||
<g transform="translate(300,80)">
|
||||
<circle cx="30" cy="30" r="25" fill="#f4d1ae"/>
|
||||
<path d="M10 20 Q30 5 50 20 Q50 15 30 10 Q10 15 10 20 Z" fill="#8b4513"/>
|
||||
<circle cx="25" cy="27" r="2" fill="#2d2d2d"/>
|
||||
<circle cx="35" cy="27" r="2" fill="#2d2d2d"/>
|
||||
<path d="M27 33 Q30 36 33 33" stroke="#d2691e" stroke-width="1" fill="none"/>
|
||||
|
||||
<!-- Professional attire -->
|
||||
<rect x="15" y="55" width="30" height="40" rx="5" fill="#4D3F3C"/>
|
||||
<rect x="18" y="58" width="24" height="34" rx="3" fill="#A39660"/>
|
||||
|
||||
<!-- Teaching gesture -->
|
||||
<path d="M55 40 L80 30" stroke="#f4d1ae" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Students/trainees -->
|
||||
<g transform="translate(100,200)">
|
||||
<!-- Student 1 -->
|
||||
<circle cx="30" cy="30" r="20" fill="#f5deb3"/>
|
||||
<path d="M15 20 Q30 10 45 20 Q45 35 40 45 Q30 50 20 45 Q10 35 15 20 Z" fill="#2f1b14"/>
|
||||
<circle cx="26" cy="27" r="2" fill="#2d2d2d"/>
|
||||
<circle cx="34" cy="27" r="2" fill="#2d2d2d"/>
|
||||
<rect x="20" y="50" width="20" height="30" rx="3" fill="#A39660"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(200,200)">
|
||||
<!-- Student 2 -->
|
||||
<circle cx="30" cy="30" r="20" fill="#f4d1ae"/>
|
||||
<path d="M15 20 Q30 10 45 20 Q45 35 40 45 Q30 50 20 45 Q10 35 15 20 Z" fill="#8b4513"/>
|
||||
<circle cx="26" cy="27" r="2" fill="#2d2d2d"/>
|
||||
<circle cx="34" cy="27" r="2" fill="#2d2d2d"/>
|
||||
<rect x="20" y="50" width="20" height="30" rx="3" fill="#A39660"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(300,200)">
|
||||
<!-- Student 3 -->
|
||||
<circle cx="30" cy="30" r="20" fill="#f5deb3"/>
|
||||
<path d="M15 20 Q30 10 45 20 Q45 35 40 45 Q30 50 20 45 Q10 35 15 20 Z" fill="#654321"/>
|
||||
<circle cx="26" cy="27" r="2" fill="#2d2d2d"/>
|
||||
<circle cx="34" cy="27" r="2" fill="#2d2d2d"/>
|
||||
<rect x="20" y="50" width="20" height="30" rx="3" fill="#A39660"/>
|
||||
</g>
|
||||
|
||||
<!-- Training materials -->
|
||||
<rect x="450" y="100" width="100" height="80" rx="5" fill="#ffffff" stroke="#e5e5e5" stroke-width="2"/>
|
||||
<text x="500" y="120" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">Materiales</text>
|
||||
|
||||
<!-- Tools and supplies -->
|
||||
<circle cx="470" cy="140" r="8" fill="#A39660"/>
|
||||
<rect x="485" y="135" width="15" height="10" rx="2" fill="#4D3F3C"/>
|
||||
<circle cx="520" cy="140" r="6" fill="#A39660"/>
|
||||
<rect x="470" y="155" width="20" height="5" rx="2" fill="#4D3F3C"/>
|
||||
<circle cx="510" cy="160" r="5" fill="#A39660"/>
|
||||
|
||||
<!-- Learning progress indicators -->
|
||||
<circle cx="400" cy="200" r="15" fill="#A39660" opacity="0.3"/>
|
||||
<text x="400" y="205" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">✓</text>
|
||||
|
||||
<!-- Bottom description -->
|
||||
<rect x="50" y="320" width="500" height="60" rx="10" fill="rgba(255,255,255,0.9)"/>
|
||||
<text x="300" y="340" text-anchor="middle" fill="#4D3F3C" font-size="16" font-weight="bold">Capacitación Continua</text>
|
||||
<text x="300" y="360" text-anchor="middle" fill="#A39660" font-size="12">Técnicas nuevas • Tendencias • Desarrollo profesional</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
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 |
76
assets/img/carousel/equipo-trabajo.webp
Normal file
76
assets/img/carousel/equipo-trabajo.webp
Normal file
@@ -0,0 +1,76 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="teamBg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#fdf7fd;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#f5e6f5;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="600" height="400" fill="url(#teamBg)"/>
|
||||
|
||||
<!-- Team members working together -->
|
||||
<g transform="translate(50,150)">
|
||||
<!-- Team member 1 -->
|
||||
<circle cx="50" cy="50" r="30" fill="#f4d1ae"/>
|
||||
<path d="M20 35 Q50 15 80 35 Q80 25 50 20 Q20 25 20 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"/>
|
||||
|
||||
<!-- Working on client -->
|
||||
<rect x="30" y="80" width="40" height="60" rx="5" fill="#A39660"/>
|
||||
<circle cx="90" cy="100" r="8" fill="#ffffff"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(200,120)">
|
||||
<!-- Team member 2 -->
|
||||
<circle cx="50" cy="50" r="30" fill="#f5deb3"/>
|
||||
<path d="M25 30 Q50 10 75 30 Q80 60 70 80 Q50 90 30 80 Q20 60 25 30 Z" fill="#2f1b14"/>
|
||||
<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"/>
|
||||
|
||||
<!-- Professional tools -->
|
||||
<rect x="40" y="80" width="20" height="40" rx="3" fill="#4D3F3C"/>
|
||||
<circle cx="20" cy="90" r="6" fill="#A39660"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(350,150)">
|
||||
<!-- Team member 3 -->
|
||||
<circle cx="50" cy="50" r="30" fill="#f4d1ae"/>
|
||||
<path d="M30 35 Q50 20 70 35 Q75 55 70 70 Q50 80 30 70 Q25 55 30 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"/>
|
||||
|
||||
<!-- Consultation -->
|
||||
<rect x="30" y="80" width="40" height="50" rx="5" fill="#A39660"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(500,130)">
|
||||
<!-- Team member 4 -->
|
||||
<circle cx="40" cy="50" r="25" fill="#f5deb3"/>
|
||||
<path d="M20 35 Q40 20 60 35 Q60 55 55 70 Q40 75 25 70 Q15 55 20 35 Z" fill="#2f1b14"/>
|
||||
<circle cx="35" cy="45" r="2" fill="#2d2d2d"/>
|
||||
<circle cx="45" cy="45" r="2" fill="#2d2d2d"/>
|
||||
<path d="M37 52 Q40 55 43 52" stroke="#d2691e" stroke-width="1" fill="none"/>
|
||||
|
||||
<!-- Support role -->
|
||||
<rect x="25" y="75" width="30" height="40" rx="3" fill="#4D3F3C"/>
|
||||
</g>
|
||||
|
||||
<!-- Collaboration elements -->
|
||||
<circle cx="150" cy="100" r="5" fill="#A39660" opacity="0.6"/>
|
||||
<circle cx="300" cy="80" r="5" fill="#A39660" opacity="0.6"/>
|
||||
<circle cx="450" cy="110" r="5" fill="#A39660" opacity="0.6"/>
|
||||
|
||||
<!-- Communication lines -->
|
||||
<path d="M150 180 Q250 150 350 180" stroke="#A39660" stroke-width="2" opacity="0.4" fill="none"/>
|
||||
<path d="M250 170 Q350 140 450 160" stroke="#A39660" stroke-width="2" opacity="0.4" fill="none"/>
|
||||
|
||||
<!-- Team values -->
|
||||
<rect x="50" y="320" width="500" height="60" rx="10" fill="rgba(255,255,255,0.8)"/>
|
||||
<text x="300" y="340" text-anchor="middle" fill="#4D3F3C" font-size="16" font-weight="bold">Trabajo en Equipo</text>
|
||||
<text x="300" y="360" text-anchor="middle" fill="#A39660" font-size="12">Colaboración • Apoyo • Crecimiento Conjunto</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
BIN
assets/img/carousel/hero/1.jpeg
Normal file
BIN
assets/img/carousel/hero/1.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
assets/img/carousel/hero/2.jpeg
Normal file
BIN
assets/img/carousel/hero/2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
assets/img/carousel/hero/3.jpeg
Normal file
BIN
assets/img/carousel/hero/3.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
assets/img/carousel/hero/4.jpeg
Normal file
BIN
assets/img/carousel/hero/4.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
assets/img/carousel/hero/5.jpeg
Normal file
BIN
assets/img/carousel/hero/5.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
assets/img/carousel/hero/6.jpeg
Normal file
BIN
assets/img/carousel/hero/6.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
assets/img/carousel/hero/7.jpeg
Normal file
BIN
assets/img/carousel/hero/7.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
assets/img/carousel/hero/8.jpeg
Normal file
BIN
assets/img/carousel/hero/8.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
assets/img/carousel/hero/9.jpeg
Normal file
BIN
assets/img/carousel/hero/9.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
111
assets/img/carousel/resultados.webp
Normal file
111
assets/img/carousel/resultados.webp
Normal file
@@ -0,0 +1,111 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="resultsBg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#fdf7fd;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#f5e6f5;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#ffed4a;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="600" height="400" fill="url(#resultsBg)"/>
|
||||
|
||||
<!-- Showcase of beautiful work results -->
|
||||
|
||||
<!-- Perfect nail art -->
|
||||
<g transform="translate(80,80)">
|
||||
<rect x="0" y="0" width="120" height="100" rx="10" fill="#ffffff" stroke="#e5e5e5" stroke-width="2"/>
|
||||
<text x="60" y="20" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">Nail Art</text>
|
||||
|
||||
<!-- Nails representation -->
|
||||
<ellipse cx="30" cy="50" rx="8" ry="12" fill="#ffb6c1"/>
|
||||
<ellipse cx="30" cy="50" rx="6" ry="10" fill="#A39660" opacity="0.3"/>
|
||||
|
||||
<ellipse cx="50" cy="50" rx="8" ry="12" fill="#ffb6c1"/>
|
||||
<ellipse cx="50" cy="50" rx="6" ry="10" fill="#A39660" opacity="0.3"/>
|
||||
|
||||
<ellipse cx="70" cy="50" rx="8" ry="12" fill="#ffb6c1"/>
|
||||
<ellipse cx="70" cy="50" rx="6" ry="10" fill="#A39660" opacity="0.3"/>
|
||||
|
||||
<ellipse cx="90" cy="50" rx="8" ry="12" fill="#ffb6c1"/>
|
||||
<ellipse cx="90" cy="50" rx="6" ry="10" fill="#A39660" opacity="0.3"/>
|
||||
|
||||
<!-- Decorative details -->
|
||||
<circle cx="30" cy="50" r="2" fill="#ffd700"/>
|
||||
<circle cx="70" cy="50" r="2" fill="#ffd700"/>
|
||||
|
||||
<text x="60" y="85" text-anchor="middle" fill="#A39660" font-size="8">Perfección</text>
|
||||
</g>
|
||||
|
||||
<!-- Beautiful lashes -->
|
||||
<g transform="translate(250,80)">
|
||||
<rect x="0" y="0" width="120" height="100" rx="10" fill="#ffffff" stroke="#e5e5e5" stroke-width="2"/>
|
||||
<text x="60" y="20" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">Extensiones</text>
|
||||
|
||||
<!-- Eye with lashes -->
|
||||
<ellipse cx="60" cy="50" rx="25" ry="15" fill="#f4d1ae"/>
|
||||
<ellipse cx="60" cy="50" rx="20" ry="12" fill="#ffffff"/>
|
||||
<circle cx="60" cy="50" r="8" fill="#4D3F3C"/>
|
||||
<circle cx="62" cy="48" r="2" fill="#ffffff"/>
|
||||
|
||||
<!-- Beautiful lashes -->
|
||||
<path d="M40 45 Q35 35 32 40" stroke="#2d2d2d" stroke-width="1" fill="none"/>
|
||||
<path d="M45 42 Q40 30 38 35" stroke="#2d2d2d" stroke-width="1" fill="none"/>
|
||||
<path d="M50 40 Q48 28 46 32" stroke="#2d2d2d" stroke-width="1" fill="none"/>
|
||||
<path d="M55 40 Q53 28 54 32" stroke="#2d2d2d" stroke-width="1" fill="none"/>
|
||||
<path d="M60 40 Q60 28 62 32" stroke="#2d2d2d" stroke-width="1" fill="none"/>
|
||||
<path d="M65 40 Q67 28 66 32" stroke="#2d2d2d" stroke-width="1" fill="none"/>
|
||||
<path d="M70 42 Q72 30 74 35" stroke="#2d2d2d" stroke-width="1" fill="none"/>
|
||||
<path d="M75 45 Q77 35 80 40" stroke="#2d2d2d" stroke-width="1" fill="none"/>
|
||||
|
||||
<text x="60" y="85" text-anchor="middle" fill="#A39660" font-size="8">Impecable</text>
|
||||
</g>
|
||||
|
||||
<!-- Stunning hair -->
|
||||
<g transform="translate(400,80)">
|
||||
<rect x="0" y="0" width="120" height="100" rx="10" fill="#ffffff" stroke="#e5e5e5" stroke-width="2"/>
|
||||
<text x="60" y="20" text-anchor="middle" fill="#4D3F3C" font-size="10" font-weight="bold">Estilismo</text>
|
||||
|
||||
<!-- Styled hair -->
|
||||
<circle cx="60" cy="45" r="15" fill="#f4d1ae"/>
|
||||
<path d="M45 35 Q60 20 75 35 Q80 50 75 65 Q60 75 45 65 Q40 50 45 35 Z" fill="#8b4513"/>
|
||||
|
||||
<!-- Hair highlights and style -->
|
||||
<path d="M50 40 Q60 25 70 40" stroke="#deb887" stroke-width="2" fill="none" opacity="0.8"/>
|
||||
<path d="M52 50 Q62 35 72 50" stroke="#deb887" stroke-width="2" fill="none" opacity="0.6"/>
|
||||
|
||||
<text x="60" y="85" text-anchor="middle" fill="#A39660" font-size="8">Espectacular</text>
|
||||
</g>
|
||||
|
||||
<!-- Quality awards/recognition -->
|
||||
<g transform="translate(150,220)">
|
||||
<circle cx="50" cy="50" r="40" fill="url(#goldGradient)"/>
|
||||
<circle cx="50" cy="50" r="30" fill="#ffd700"/>
|
||||
<path d="M50 25 L55 40 L70 40 L58 50 L63 65 L50 55 L37 65 L42 50 L30 40 L45 40 Z" fill="#ffffff"/>
|
||||
<text x="50" y="105" text-anchor="middle" fill="#4D3F3C" font-size="12" font-weight="bold">Excelencia</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(300,220)">
|
||||
<circle cx="50" cy="50" r="40" fill="url(#goldGradient)"/>
|
||||
<circle cx="50" cy="50" r="30" fill="#ffd700"/>
|
||||
<text x="50" y="58" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="bold">100%</text>
|
||||
<text x="50" y="105" text-anchor="middle" fill="#4D3F3C" font-size="12" font-weight="bold">Satisfacción</text>
|
||||
</g>
|
||||
|
||||
<!-- Client satisfaction representation -->
|
||||
<g transform="translate(450,220)">
|
||||
<circle cx="50" cy="50" r="30" fill="#f4d1ae"/>
|
||||
<circle cx="42" cy="42" r="3" fill="#2d2d2d"/>
|
||||
<circle cx="58" cy="42" r="3" fill="#2d2d2d"/>
|
||||
<path d="M35 55 Q50 70 65 55" stroke="#d2691e" stroke-width="3" fill="none"/>
|
||||
<text x="50" y="105" text-anchor="middle" fill="#4D3F3C" font-size="12" font-weight="bold">Cliente Feliz</text>
|
||||
</g>
|
||||
|
||||
<!-- Bottom description -->
|
||||
<rect x="50" y="340" width="500" height="50" rx="10" fill="rgba(255,255,255,0.9)"/>
|
||||
<text x="300" y="360" text-anchor="middle" fill="#4D3F3C" font-size="16" font-weight="bold">Resultados que Nos Enorgullecen</text>
|
||||
<text x="300" y="378" text-anchor="middle" fill="#A39660" font-size="12">Calidad • Precisión • Satisfacción total</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
60
assets/img/carousel/salon-ambiente.webp
Normal file
60
assets/img/carousel/salon-ambiente.webp
Normal file
@@ -0,0 +1,60 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="floorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f8f8f8;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#e5e5e5;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="wallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#fdf7fd;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#f5e6f5;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background - salon interior -->
|
||||
<rect width="600" height="400" fill="url(#wallGradient)"/>
|
||||
|
||||
<!-- Floor -->
|
||||
<rect x="0" y="300" width="600" height="100" fill="url(#floorGradient)"/>
|
||||
|
||||
<!-- Modern salon chairs -->
|
||||
<g transform="translate(100,200)">
|
||||
<rect x="0" y="50" width="80" height="100" rx="10" fill="#4D3F3C"/>
|
||||
<rect x="5" y="55" width="70" height="90" rx="8" fill="#A39660"/>
|
||||
<circle cx="40" cy="85" r="15" fill="#ffffff" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(250,200)">
|
||||
<rect x="0" y="50" width="80" height="100" rx="10" fill="#4D3F3C"/>
|
||||
<rect x="5" y="55" width="70" height="90" rx="8" fill="#A39660"/>
|
||||
<circle cx="40" cy="85" r="15" fill="#ffffff" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(400,200)">
|
||||
<rect x="0" y="50" width="80" height="100" rx="10" fill="#4D3F3C"/>
|
||||
<rect x="5" y="55" width="70" height="90" rx="8" fill="#A39660"/>
|
||||
<circle cx="40" cy="85" r="15" fill="#ffffff" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- Modern lighting -->
|
||||
<circle cx="150" cy="80" r="20" fill="#ffffff" opacity="0.9"/>
|
||||
<circle cx="300" cy="80" r="20" fill="#ffffff" opacity="0.9"/>
|
||||
<circle cx="450" cy="80" r="20" fill="#ffffff" opacity="0.9"/>
|
||||
|
||||
<!-- Equipment stations -->
|
||||
<rect x="50" y="120" width="40" height="60" rx="5" fill="#2d2d2d"/>
|
||||
<rect x="510" y="120" width="40" height="60" rx="5" fill="#2d2d2d"/>
|
||||
|
||||
<!-- Professional storage -->
|
||||
<rect x="20" y="50" width="30" height="120" rx="5" fill="#4D3F3C"/>
|
||||
<rect x="550" y="50" width="30" height="120" rx="5" fill="#4D3F3C"/>
|
||||
|
||||
<!-- Modern decor elements -->
|
||||
<circle cx="80" cy="40" r="8" fill="#A39660" opacity="0.6"/>
|
||||
<circle cx="520" cy="40" r="8" fill="#A39660" opacity="0.6"/>
|
||||
|
||||
<!-- Window/natural light effect -->
|
||||
<rect x="0" y="0" width="600" height="50" fill="rgba(255,255,255,0.3)"/>
|
||||
|
||||
<!-- Professional ambiance text -->
|
||||
<text x="300" y="380" text-anchor="middle" fill="#4D3F3C" font-size="18" font-weight="bold">Ambiente Profesional Moderno</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Reference in New Issue
Block a user