carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(branding): generar e incorporar archivos vectoriales SVG oficiales de dripzone

Browse Source
This commit is contained in:
AI Bot 2026-08-26 07:27:57 -05:00
parent b98b97c938
commit aa91f42700
8 changed files with 1046 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
assets_generados/dripzone_emblem.svg Normal file
View File

@ -0,0 +1,160 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%">
<defs>
<!-- Background Gradient -->
<radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4c1d95" stop-opacity="0.6"/>
<stop offset="60%" stop-color="#1e1b4b" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#09090b" stop-opacity="0"/>
</radialGradient>
<!-- Chrome & Neon Metallic Gradients -->
<linearGradient id="neonPurple" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f0abfc"/>
<stop offset="30%" stop-color="#c084fc"/>
<stop offset="70%" stop-color="#9333ea"/>
<stop offset="100%" stop-color="#6b21a8"/>
</linearGradient>
<linearGradient id="chromeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="45%" stop-color="#e9d5ff"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="85%" stop-color="#581c87"/>
<stop offset="100%" stop-color="#3b0764"/>
</linearGradient>
<linearGradient id="glowBorder" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ec4899"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
<!-- Neon Drop Shadow Filter -->
<filter id="neonFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="6" result="blur1"/>
<feGaussianBlur stdDeviation="15" result="blur2"/>
<feMerge>
<feMergeNode in="blur2"/>
<feMergeNode in="blur1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="intenseGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"/>
<feColorMatrix in="blur" type="matrix" values="
1 0 0 0 0.8
0 0.2 0 0 0.3
0 0 1 0 0.95
0 0 0 2 -0.1" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Ambient Glow -->
<circle cx="250" cy="250" r="230" fill="url(#bgGlow)"/>
<!-- Outer Neon Halo Arc -->
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="url(#glowBorder)" stroke-width="12" stroke-linecap="round" filter="url(#intenseGlow)" opacity="0.85"/>
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
<!-- Top Splash Droplet Arc -->
<path d="M 140 135 C 160 110 200 100 230 100 C 270 100 300 120 320 150 C 290 140 260 140 230 145 C 190 150 160 170 140 195 Z"
fill="url(#neonPurple)" filter="url(#neonFilter)"/>
<!-- Main Molten "D" Frame -->
<g filter="url(#neonFilter)">
<!-- Back Spine of D -->
<path d="M 145 130
L 240 130
C 330 130 380 180 380 260
C 380 340 320 390 240 390
L 165 390
C 160 410 155 435 150 455
C 146 470 135 470 135 450
C 135 425 140 405 140 390
L 130 390
C 120 390 115 380 115 370
L 115 150
C 115 135 125 130 145 130 Z"
fill="url(#chromeGradient)" stroke="url(#glowBorder)" stroke-width="8" stroke-linejoin="round"/>
<!-- Dripping Molten Droplets at Bottom -->
<!-- Drop 1 -->
<path d="M 185 390 C 185 430 175 450 175 465 C 175 475 185 478 188 468 C 195 445 200 415 200 390 Z" fill="url(#neonPurple)"/>
<circle cx="182" cy="466" r="6" fill="#f0abfc" filter="url(#intenseGlow)"/>
<!-- Drop 2 (Center long drip) -->
<path d="M 245 390 C 245 440 235 470 235 490 C 235 498 245 500 248 490 C 258 460 265 420 265 390 Z" fill="url(#neonPurple)"/>
<circle cx="242" cy="490" r="7" fill="#f0abfc" filter="url(#intenseGlow)"/>
<!-- Drop 3 (Right drip) -->
<path d="M 310 375 C 310 410 320 435 320 450 C 320 458 328 456 328 448 C 328 430 322 405 320 370 Z" fill="url(#neonPurple)"/>
<circle cx="324" cy="449" r="5" fill="#f0abfc"/>
<!-- Inner Cutout of "D" -->
<path d="M 175 180
L 230 180
C 285 180 315 210 315 260
C 315 310 285 340 230 340
L 175 340 Z"
fill="#0a0a0c" stroke="url(#glowBorder)" stroke-width="6"/>
</g>
<!-- High-Top Sneaker Silhouette inside the D -->
<g filter="url(#intenseGlow)" transform="translate(145, 175) scale(0.48)">
<!-- Sneaker Outsole with Drips -->
<path d="M 30 290
C 80 290 120 295 180 295
C 240 295 300 290 340 285
C 370 280 395 260 405 235
C 410 220 405 210 390 210
C 365 210 340 225 310 230
C 250 240 180 240 120 235
C 70 230 40 235 25 255
C 15 270 18 290 30 290 Z"
fill="url(#neonPurple)" stroke="#ffffff" stroke-width="4"/>
<!-- Sneaker Upper Body -->
<path d="M 70 240
L 110 140
C 120 115 140 95 170 90
L 220 85
C 235 85 245 95 245 110
L 245 140
L 280 160
C 310 180 340 195 380 205
L 360 235
C 300 235 240 235 180 230
L 70 240 Z"
fill="url(#chromeGradient)" stroke="#f0abfc" stroke-width="5" stroke-linejoin="round"/>
<!-- Sneaker Collar & Ankle Padding -->
<path d="M 125 125 C 145 105 175 100 215 100 L 225 140 C 185 140 155 145 135 165 Z"
fill="#3b0764" stroke="#ec4899" stroke-width="3"/>
<!-- Laces Detail -->
<line x1="175" y1="135" x2="210" y2="150" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="195" y1="155" x2="235" y2="170" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="220" y1="175" x2="260" y2="190" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="245" y1="195" x2="285" y2="210" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<!-- Swoosh / Drip Wave Overlay on Shoe -->
<path d="M 120 200 C 180 200 230 180 290 150 C 260 190 210 220 150 225 Z"
fill="#ffffff" opacity="0.9" filter="url(#neonFilter)"/>
<!-- Sole Drip Details -->
<path d="M 90 290 C 90 320 80 340 80 350 C 80 355 86 355 88 348 C 95 330 100 310 100 290 Z" fill="#ec4899"/>
<path d="M 190 295 C 190 335 180 365 180 380 C 180 388 188 388 190 378 C 198 350 205 320 205 295 Z" fill="#ec4899"/>
<path d="M 280 290 C 280 315 275 335 275 345 C 275 350 280 350 282 344 C 288 325 292 305 292 290 Z" fill="#ec4899"/>
</g>
<!-- Chrome Highlights Overlay -->
<path d="M 155 140 L 235 140 C 310 140 360 180 365 245 C 345 190 295 160 235 160 L 155 160 Z"
fill="#ffffff" opacity="0.55"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

124
assets_generados/dripzone_logo_horizontal.svg Normal file
View File

@ -0,0 +1,124 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" width="100%" height="100%">
<defs>
<!-- Background Ambient Glow -->
<radialGradient id="hBgGlow" cx="20%" cy="50%" r="60%">
<stop offset="0%" stop-color="#9333ea" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#09090b" stop-opacity="0"/>
</radialGradient>
<!-- Chrome & Neon Gradients -->
<linearGradient id="hChromeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#f5d0fe"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="85%" stop-color="#581c87"/>
<stop offset="100%" stop-color="#3b0764"/>
</linearGradient>
<linearGradient id="hZoneGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#fbcfe8"/>
<stop offset="50%" stop-color="#ec4899"/>
<stop offset="85%" stop-color="#9d174d"/>
<stop offset="100%" stop-color="#500724"/>
</linearGradient>
<linearGradient id="hGlowBorder" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ec4899"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
<filter id="hGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="6" result="b1"/>
<feGaussianBlur stdDeviation="14" result="b2"/>
<feMerge>
<feMergeNode in="b2"/>
<feMergeNode in="b1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&amp;family=Outfit:wght@800;900&amp;display=swap');
.h-drip-font {
font-family: 'Outfit', 'Montserrat', -apple-system, sans-serif;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
}
.h-tagline-font {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: 0.25em;
text-transform: uppercase;
}
</style>
<!-- Ambient Glow -->
<rect x="0" y="0" width="1200" height="400" fill="url(#hBgGlow)"/>
<!-- Left: Glowing "D" Sneaker Emblem -->
<g transform="translate(40, -40) scale(0.96)">
<!-- Halo Arc -->
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="url(#hGlowBorder)" stroke-width="12" stroke-linecap="round" filter="url(#hGlow)" opacity="0.9"/>
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
<!-- Top Droplet Arc -->
<path d="M 140 135 C 160 110 200 100 230 100 C 270 100 300 120 320 150 C 290 140 260 140 230 145 C 190 150 160 170 140 195 Z"
fill="url(#hGlowBorder)" filter="url(#hGlow)"/>
<!-- Main "D" -->
<g filter="url(#hGlow)">
<path d="M 145 130 L 240 130 C 330 130 380 180 380 260 C 380 340 320 390 240 390 L 165 390 C 160 410 155 435 150 455 C 146 470 135 470 135 450 C 135 425 140 405 140 390 L 130 390 C 120 390 115 380 115 370 L 115 150 C 115 135 125 130 145 130 Z"
fill="url(#hChromeGrad)" stroke="url(#hGlowBorder)" stroke-width="7"/>
<!-- Drips -->
<path d="M 185 390 C 185 430 175 450 175 465 C 175 475 185 478 188 468 C 195 445 200 415 200 390 Z" fill="#c084fc"/>
<circle cx="182" cy="466" r="6" fill="#f0abfc"/>
<path d="M 245 390 C 245 440 235 470 235 490 C 235 498 245 500 248 490 C 258 460 265 420 265 390 Z" fill="#c084fc"/>
<circle cx="242" cy="490" r="7" fill="#f0abfc"/>
<!-- Inner Cutout -->
<path d="M 175 180 L 230 180 C 285 180 315 210 315 260 C 315 310 285 340 230 340 L 175 340 Z" fill="#09090b" stroke="url(#hGlowBorder)" stroke-width="5"/>
</g>
<!-- Sneaker Silhouette inside D -->
<g filter="url(#hGlow)" transform="translate(145, 175) scale(0.48)">
<path d="M 30 290 C 80 290 120 295 180 295 C 240 295 300 290 340 285 C 370 280 395 260 405 235 C 410 220 405 210 390 210 C 365 210 340 225 310 230 C 250 240 180 240 120 235 C 70 230 40 235 25 255 C 15 270 18 290 30 290 Z"
fill="#c084fc" stroke="#ffffff" stroke-width="4"/>
<path d="M 70 240 L 110 140 C 120 115 140 95 170 90 L 220 85 C 235 85 245 95 245 110 L 245 140 L 280 160 C 310 180 340 195 380 205 L 360 235 C 300 235 240 235 180 230 L 70 240 Z"
fill="url(#hChromeGrad)" stroke="#f0abfc" stroke-width="5"/>
<line x1="175" y1="135" x2="210" y2="150" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="195" y1="155" x2="235" y2="170" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="220" y1="175" x2="260" y2="190" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
</g>
</g>
<!-- Right: DRIP ZONE Typography & Tagline -->
<g transform="translate(480, 0)">
<!-- Wordmark -->
<g filter="url(#hGlow)">
<text x="0" y="215" class="h-drip-font" font-size="140" fill="url(#hChromeGrad)" stroke="#9333ea" stroke-width="7">DRIP</text>
<text x="360" y="215" class="h-drip-font" font-size="140" fill="url(#hZoneGrad)" stroke="#ec4899" stroke-width="7">ZONE</text>
</g>
<!-- Droplet Accents -->
<g fill="#ec4899" filter="url(#hGlow)" transform="translate(0, 50)">
<path d="M 50 175 C 50 195 42 210 42 220 C 42 225 48 227 51 222 C 56 210 59 195 59 175 Z"/>
<path d="M 210 175 C 210 205 200 230 200 245 C 200 252 207 254 210 246 C 218 230 222 205 222 175 Z"/>
<path d="M 420 175 C 420 200 412 225 412 240 C 412 247 419 248 422 242 C 428 225 432 200 432 175 Z"/>
<path d="M 610 175 C 610 210 600 245 600 260 C 600 268 608 270 611 260 C 620 240 625 210 625 175 Z"/>
</g>
<!-- Tagline Subtitle -->
<g transform="translate(0, 310)">
<text x="0" y="0" class="h-tagline-font" font-size="20" fill="#ffffff" letter-spacing="0.28em">
ROPA URBANA Y ZAPATILLAS DEPORTIVAS
</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

117
assets_generados/dripzone_logo_stacked.svg Normal file
View File

@ -0,0 +1,117 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 700" width="100%" height="100%">
<defs>
<!-- Radial Ambient Glow -->
<radialGradient id="sBgGlow" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#9333ea" stop-opacity="0.45"/>
<stop offset="70%" stop-color="#3b0764" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#09090b" stop-opacity="0"/>
</radialGradient>
<!-- Chrome & Neon Gradients -->
<linearGradient id="sChromeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#f5d0fe"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="85%" stop-color="#581c87"/>
<stop offset="100%" stop-color="#3b0764"/>
</linearGradient>
<linearGradient id="sZoneGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#fbcfe8"/>
<stop offset="50%" stop-color="#ec4899"/>
<stop offset="85%" stop-color="#9d174d"/>
<stop offset="100%" stop-color="#500724"/>
</linearGradient>
<linearGradient id="sGlowBorder" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ec4899"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
<filter id="sGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="6" result="b1"/>
<feGaussianBlur stdDeviation="14" result="b2"/>
<feMerge>
<feMergeNode in="b2"/>
<feMergeNode in="b1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&amp;family=Outfit:wght@800;900&amp;display=swap');
.s-drip-font {
font-family: 'Outfit', 'Montserrat', -apple-system, sans-serif;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
}
.s-tagline-font {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
}
</style>
<!-- Ambient Glow -->
<rect x="0" y="0" width="600" height="700" fill="url(#sBgGlow)"/>
<!-- Top Center: Glowing "D" Sneaker Emblem -->
<g transform="translate(65, -20) scale(0.94)">
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="url(#sGlowBorder)" stroke-width="12" stroke-linecap="round" filter="url(#sGlow)" opacity="0.9"/>
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
<path d="M 140 135 C 160 110 200 100 230 100 C 270 100 300 120 320 150 C 290 140 260 140 230 145 C 190 150 160 170 140 195 Z"
fill="url(#sGlowBorder)" filter="url(#sGlow)"/>
<g filter="url(#sGlow)">
<path d="M 145 130 L 240 130 C 330 130 380 180 380 260 C 380 340 320 390 240 390 L 165 390 C 160 410 155 435 150 455 C 146 470 135 470 135 450 C 135 425 140 405 140 390 L 130 390 C 120 390 115 380 115 370 L 115 150 C 115 135 125 130 145 130 Z"
fill="url(#sChromeGrad)" stroke="url(#sGlowBorder)" stroke-width="7"/>
<path d="M 185 390 C 185 430 175 450 175 465 C 175 475 185 478 188 468 C 195 445 200 415 200 390 Z" fill="#c084fc"/>
<path d="M 245 390 C 245 440 235 470 235 490 C 235 498 245 500 248 490 C 258 460 265 420 265 390 Z" fill="#c084fc"/>
<path d="M 175 180 L 230 180 C 285 180 315 210 315 260 C 315 310 285 340 230 340 L 175 340 Z" fill="#09090b" stroke="url(#sGlowBorder)" stroke-width="5"/>
</g>
<g filter="url(#sGlow)" transform="translate(145, 175) scale(0.48)">
<path d="M 30 290 C 80 290 120 295 180 295 C 240 295 300 290 340 285 C 370 280 395 260 405 235 C 410 220 405 210 390 210 C 365 210 340 225 310 230 C 250 240 180 240 120 235 C 70 230 40 235 25 255 C 15 270 18 290 30 290 Z"
fill="#c084fc" stroke="#ffffff" stroke-width="4"/>
<path d="M 70 240 L 110 140 C 120 115 140 95 170 90 L 220 85 C 235 85 245 95 245 110 L 245 140 L 280 160 C 310 180 340 195 380 205 L 360 235 C 300 235 240 235 180 230 L 70 240 Z"
fill="url(#sChromeGrad)" stroke="#f0abfc" stroke-width="5"/>
<line x1="175" y1="135" x2="210" y2="150" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="195" y1="155" x2="235" y2="170" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="220" y1="175" x2="260" y2="190" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
</g>
</g>
<!-- Bottom Center: Typography DRIPZONE -->
<g transform="translate(300, 520)" filter="url(#sGlow)">
<text x="0" y="0" text-anchor="middle" class="s-drip-font" font-size="102">
<tspan fill="url(#sChromeGrad)" stroke="#9333ea" stroke-width="6">DRIP</tspan>
<tspan fill="url(#sZoneGrad)" stroke="#ec4899" stroke-width="6">ZONE</tspan>
</text>
</g>
<!-- Molten Drops under DRIPZONE -->
<g fill="#ec4899" filter="url(#sGlow)" transform="translate(300, 520)">
<path d="M -180 0 C -180 20 -185 30 -185 38 C -185 43 -180 44 -178 40 C -173 30 -170 20 -170 0 Z"/>
<path d="M -80 0 C -80 25 -88 45 -88 55 C -88 60 -82 61 -80 55 C -74 40 -70 25 -70 0 Z"/>
<path d="M 60 0 C 60 25 52 45 52 55 C 52 60 58 61 60 55 C 66 40 70 25 70 0 Z"/>
<path d="M 180 0 C 180 20 175 30 175 38 C 175 43 180 44 182 40 C 187 30 190 20 190 0 Z"/>
</g>
<!-- Tagline Subtitle -->
<g transform="translate(300, 620)">
<text x="0" y="0" text-anchor="middle" class="s-tagline-font" font-size="18" fill="#f0abfc" opacity="0.8" filter="url(#sGlow)">
ROPA URBANA Y ZAPATILLAS DEPORTIVAS
</text>
<text x="0" y="0" text-anchor="middle" class="s-tagline-font" font-size="18" fill="#ffffff">
ROPA URBANA Y ZAPATILLAS DEPORTIVAS
</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

122
assets_generados/dripzone_wordmark.svg Normal file
View File

@ -0,0 +1,122 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 320" width="100%" height="100%">
<defs>
<!-- Chrome Horizontal Gradient -->
<linearGradient id="chromeText" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="35%" stop-color="#f5d0fe"/>
<stop offset="48%" stop-color="#c084fc"/>
<stop offset="52%" stop-color="#7e22ce"/>
<stop offset="80%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#ffffff"/>
</linearGradient>
<!-- Zone Accent Gradient -->
<linearGradient id="zoneText" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="35%" stop-color="#fbcfe8"/>
<stop offset="48%" stop-color="#f472b6"/>
<stop offset="52%" stop-color="#be185d"/>
<stop offset="80%" stop-color="#ec4899"/>
<stop offset="100%" stop-color="#ffffff"/>
</linearGradient>
<!-- Neon Glow Filter -->
<filter id="wordGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur1"/>
<feGaussianBlur stdDeviation="18" result="blur2"/>
<feMerge>
<feMergeNode in="blur2"/>
<feMergeNode in="blur1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&amp;family=Outfit:wght@800;900&amp;display=swap');
.drip-font {
font-family: 'Outfit', 'Montserrat', -apple-system, sans-serif;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
}
.tagline-font {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
}
</style>
<!-- Ambient Glow Behind Letters -->
<ellipse cx="450" cy="140" rx="420" ry="80" fill="#9333ea" opacity="0.25" filter="url(#wordGlow)"/>
<!-- Main Wordmark: DRIP ZONE -->
<g filter="url(#wordGlow)">
<!-- DRIP -->
<text x="50" y="175"
class="drip-font"
font-size="145"
letter-spacing="2"
fill="url(#chromeText)"
stroke="#9333ea"
stroke-width="7"
stroke-linejoin="round">DRIP</text>
<!-- ZONE -->
<text x="430" y="175"
class="drip-font"
font-size="145"
letter-spacing="2"
fill="url(#zoneText)"
stroke="#ec4899"
stroke-width="7"
stroke-linejoin="round">ZONE</text>
</g>
<!-- Droplets Drip Accents under typography -->
<g fill="#ec4899" filter="url(#wordGlow)" transform="translate(0, 10)">
<!-- Drop under D -->
<path d="M 105 175 C 105 195 98 210 98 220 C 98 225 104 227 107 222 C 112 210 115 195 115 175 Z"/>
<circle cx="102" cy="223" r="4.5" fill="#f0abfc"/>
<!-- Drop under R -->
<path d="M 230 175 C 230 205 220 230 220 245 C 220 252 227 254 230 246 C 238 230 242 205 242 175 Z"/>
<circle cx="225" cy="248" r="5" fill="#f0abfc"/>
<!-- Drop under P -->
<path d="M 360 175 C 360 195 352 215 352 225 C 352 230 358 230 361 224 C 367 210 370 195 370 175 Z"/>
<circle cx="356" cy="227" r="4.5" fill="#f0abfc"/>
<!-- Drop under Z -->
<path d="M 485 175 C 485 200 478 225 478 240 C 478 247 485 248 488 242 C 494 225 498 200 498 175 Z"/>
<circle cx="482" cy="243" r="5" fill="#f0abfc"/>
<!-- Drop under N -->
<path d="M 685 175 C 685 210 675 245 675 260 C 675 268 683 270 686 260 C 695 240 700 210 700 175 Z"/>
<circle cx="680" cy="263" r="5.5" fill="#f0abfc"/>
<!-- Drop under E -->
<path d="M 810 175 C 810 195 802 215 802 225 C 802 230 808 230 811 224 C 817 210 820 195 820 175 Z"/>
<circle cx="806" cy="227" r="4.5" fill="#f0abfc"/>
</g>
<!-- Tagline Banner in Spanish -->
<g transform="translate(450, 275)">
<!-- Subtitle Glow -->
<text x="0" y="0"
text-anchor="middle"
class="tagline-font"
font-size="21"
fill="#f0abfc"
opacity="0.8"
filter="url(#wordGlow)">ROPA URBANA Y ZAPATILLAS DEPORTIVAS</text>
<!-- Subtitle Crisp White Text -->
<text x="0" y="0"
text-anchor="middle"
class="tagline-font"
font-size="21"
fill="#ffffff">ROPA URBANA Y ZAPATILLAS DEPORTIVAS</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

160
dripzone-app/public/dripzone_emblem.svg Normal file
View File

@ -0,0 +1,160 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%">
<defs>
<!-- Background Gradient -->
<radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4c1d95" stop-opacity="0.6"/>
<stop offset="60%" stop-color="#1e1b4b" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#09090b" stop-opacity="0"/>
</radialGradient>
<!-- Chrome & Neon Metallic Gradients -->
<linearGradient id="neonPurple" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f0abfc"/>
<stop offset="30%" stop-color="#c084fc"/>
<stop offset="70%" stop-color="#9333ea"/>
<stop offset="100%" stop-color="#6b21a8"/>
</linearGradient>
<linearGradient id="chromeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="45%" stop-color="#e9d5ff"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="85%" stop-color="#581c87"/>
<stop offset="100%" stop-color="#3b0764"/>
</linearGradient>
<linearGradient id="glowBorder" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ec4899"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
<!-- Neon Drop Shadow Filter -->
<filter id="neonFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="6" result="blur1"/>
<feGaussianBlur stdDeviation="15" result="blur2"/>
<feMerge>
<feMergeNode in="blur2"/>
<feMergeNode in="blur1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="intenseGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"/>
<feColorMatrix in="blur" type="matrix" values="
1 0 0 0 0.8
0 0.2 0 0 0.3
0 0 1 0 0.95
0 0 0 2 -0.1" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Ambient Glow -->
<circle cx="250" cy="250" r="230" fill="url(#bgGlow)"/>
<!-- Outer Neon Halo Arc -->
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="url(#glowBorder)" stroke-width="12" stroke-linecap="round" filter="url(#intenseGlow)" opacity="0.85"/>
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
<!-- Top Splash Droplet Arc -->
<path d="M 140 135 C 160 110 200 100 230 100 C 270 100 300 120 320 150 C 290 140 260 140 230 145 C 190 150 160 170 140 195 Z"
fill="url(#neonPurple)" filter="url(#neonFilter)"/>
<!-- Main Molten "D" Frame -->
<g filter="url(#neonFilter)">
<!-- Back Spine of D -->
<path d="M 145 130
L 240 130
C 330 130 380 180 380 260
C 380 340 320 390 240 390
L 165 390
C 160 410 155 435 150 455
C 146 470 135 470 135 450
C 135 425 140 405 140 390
L 130 390
C 120 390 115 380 115 370
L 115 150
C 115 135 125 130 145 130 Z"
fill="url(#chromeGradient)" stroke="url(#glowBorder)" stroke-width="8" stroke-linejoin="round"/>
<!-- Dripping Molten Droplets at Bottom -->
<!-- Drop 1 -->
<path d="M 185 390 C 185 430 175 450 175 465 C 175 475 185 478 188 468 C 195 445 200 415 200 390 Z" fill="url(#neonPurple)"/>
<circle cx="182" cy="466" r="6" fill="#f0abfc" filter="url(#intenseGlow)"/>
<!-- Drop 2 (Center long drip) -->
<path d="M 245 390 C 245 440 235 470 235 490 C 235 498 245 500 248 490 C 258 460 265 420 265 390 Z" fill="url(#neonPurple)"/>
<circle cx="242" cy="490" r="7" fill="#f0abfc" filter="url(#intenseGlow)"/>
<!-- Drop 3 (Right drip) -->
<path d="M 310 375 C 310 410 320 435 320 450 C 320 458 328 456 328 448 C 328 430 322 405 320 370 Z" fill="url(#neonPurple)"/>
<circle cx="324" cy="449" r="5" fill="#f0abfc"/>
<!-- Inner Cutout of "D" -->
<path d="M 175 180
L 230 180
C 285 180 315 210 315 260
C 315 310 285 340 230 340
L 175 340 Z"
fill="#0a0a0c" stroke="url(#glowBorder)" stroke-width="6"/>
</g>
<!-- High-Top Sneaker Silhouette inside the D -->
<g filter="url(#intenseGlow)" transform="translate(145, 175) scale(0.48)">
<!-- Sneaker Outsole with Drips -->
<path d="M 30 290
C 80 290 120 295 180 295
C 240 295 300 290 340 285
C 370 280 395 260 405 235
C 410 220 405 210 390 210
C 365 210 340 225 310 230
C 250 240 180 240 120 235
C 70 230 40 235 25 255
C 15 270 18 290 30 290 Z"
fill="url(#neonPurple)" stroke="#ffffff" stroke-width="4"/>
<!-- Sneaker Upper Body -->
<path d="M 70 240
L 110 140
C 120 115 140 95 170 90
L 220 85
C 235 85 245 95 245 110
L 245 140
L 280 160
C 310 180 340 195 380 205
L 360 235
C 300 235 240 235 180 230
L 70 240 Z"
fill="url(#chromeGradient)" stroke="#f0abfc" stroke-width="5" stroke-linejoin="round"/>
<!-- Sneaker Collar & Ankle Padding -->
<path d="M 125 125 C 145 105 175 100 215 100 L 225 140 C 185 140 155 145 135 165 Z"
fill="#3b0764" stroke="#ec4899" stroke-width="3"/>
<!-- Laces Detail -->
<line x1="175" y1="135" x2="210" y2="150" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="195" y1="155" x2="235" y2="170" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="220" y1="175" x2="260" y2="190" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="245" y1="195" x2="285" y2="210" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<!-- Swoosh / Drip Wave Overlay on Shoe -->
<path d="M 120 200 C 180 200 230 180 290 150 C 260 190 210 220 150 225 Z"
fill="#ffffff" opacity="0.9" filter="url(#neonFilter)"/>
<!-- Sole Drip Details -->
<path d="M 90 290 C 90 320 80 340 80 350 C 80 355 86 355 88 348 C 95 330 100 310 100 290 Z" fill="#ec4899"/>
<path d="M 190 295 C 190 335 180 365 180 380 C 180 388 188 388 190 378 C 198 350 205 320 205 295 Z" fill="#ec4899"/>
<path d="M 280 290 C 280 315 275 335 275 345 C 275 350 280 350 282 344 C 288 325 292 305 292 290 Z" fill="#ec4899"/>
</g>
<!-- Chrome Highlights Overlay -->
<path d="M 155 140 L 235 140 C 310 140 360 180 365 245 C 345 190 295 160 235 160 L 155 160 Z"
fill="#ffffff" opacity="0.55"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

124
dripzone-app/public/dripzone_logo_horizontal.svg Normal file
View File

@ -0,0 +1,124 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" width="100%" height="100%">
<defs>
<!-- Background Ambient Glow -->
<radialGradient id="hBgGlow" cx="20%" cy="50%" r="60%">
<stop offset="0%" stop-color="#9333ea" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#09090b" stop-opacity="0"/>
</radialGradient>
<!-- Chrome & Neon Gradients -->
<linearGradient id="hChromeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#f5d0fe"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="85%" stop-color="#581c87"/>
<stop offset="100%" stop-color="#3b0764"/>
</linearGradient>
<linearGradient id="hZoneGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#fbcfe8"/>
<stop offset="50%" stop-color="#ec4899"/>
<stop offset="85%" stop-color="#9d174d"/>
<stop offset="100%" stop-color="#500724"/>
</linearGradient>
<linearGradient id="hGlowBorder" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ec4899"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
<filter id="hGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="6" result="b1"/>
<feGaussianBlur stdDeviation="14" result="b2"/>
<feMerge>
<feMergeNode in="b2"/>
<feMergeNode in="b1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&amp;family=Outfit:wght@800;900&amp;display=swap');
.h-drip-font {
font-family: 'Outfit', 'Montserrat', -apple-system, sans-serif;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
}
.h-tagline-font {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: 0.25em;
text-transform: uppercase;
}
</style>
<!-- Ambient Glow -->
<rect x="0" y="0" width="1200" height="400" fill="url(#hBgGlow)"/>
<!-- Left: Glowing "D" Sneaker Emblem -->
<g transform="translate(40, -40) scale(0.96)">
<!-- Halo Arc -->
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="url(#hGlowBorder)" stroke-width="12" stroke-linecap="round" filter="url(#hGlow)" opacity="0.9"/>
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
<!-- Top Droplet Arc -->
<path d="M 140 135 C 160 110 200 100 230 100 C 270 100 300 120 320 150 C 290 140 260 140 230 145 C 190 150 160 170 140 195 Z"
fill="url(#hGlowBorder)" filter="url(#hGlow)"/>
<!-- Main "D" -->
<g filter="url(#hGlow)">
<path d="M 145 130 L 240 130 C 330 130 380 180 380 260 C 380 340 320 390 240 390 L 165 390 C 160 410 155 435 150 455 C 146 470 135 470 135 450 C 135 425 140 405 140 390 L 130 390 C 120 390 115 380 115 370 L 115 150 C 115 135 125 130 145 130 Z"
fill="url(#hChromeGrad)" stroke="url(#hGlowBorder)" stroke-width="7"/>
<!-- Drips -->
<path d="M 185 390 C 185 430 175 450 175 465 C 175 475 185 478 188 468 C 195 445 200 415 200 390 Z" fill="#c084fc"/>
<circle cx="182" cy="466" r="6" fill="#f0abfc"/>
<path d="M 245 390 C 245 440 235 470 235 490 C 235 498 245 500 248 490 C 258 460 265 420 265 390 Z" fill="#c084fc"/>
<circle cx="242" cy="490" r="7" fill="#f0abfc"/>
<!-- Inner Cutout -->
<path d="M 175 180 L 230 180 C 285 180 315 210 315 260 C 315 310 285 340 230 340 L 175 340 Z" fill="#09090b" stroke="url(#hGlowBorder)" stroke-width="5"/>
</g>
<!-- Sneaker Silhouette inside D -->
<g filter="url(#hGlow)" transform="translate(145, 175) scale(0.48)">
<path d="M 30 290 C 80 290 120 295 180 295 C 240 295 300 290 340 285 C 370 280 395 260 405 235 C 410 220 405 210 390 210 C 365 210 340 225 310 230 C 250 240 180 240 120 235 C 70 230 40 235 25 255 C 15 270 18 290 30 290 Z"
fill="#c084fc" stroke="#ffffff" stroke-width="4"/>
<path d="M 70 240 L 110 140 C 120 115 140 95 170 90 L 220 85 C 235 85 245 95 245 110 L 245 140 L 280 160 C 310 180 340 195 380 205 L 360 235 C 300 235 240 235 180 230 L 70 240 Z"
fill="url(#hChromeGrad)" stroke="#f0abfc" stroke-width="5"/>
<line x1="175" y1="135" x2="210" y2="150" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="195" y1="155" x2="235" y2="170" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="220" y1="175" x2="260" y2="190" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
</g>
</g>
<!-- Right: DRIP ZONE Typography & Tagline -->
<g transform="translate(480, 0)">
<!-- Wordmark -->
<g filter="url(#hGlow)">
<text x="0" y="215" class="h-drip-font" font-size="140" fill="url(#hChromeGrad)" stroke="#9333ea" stroke-width="7">DRIP</text>
<text x="360" y="215" class="h-drip-font" font-size="140" fill="url(#hZoneGrad)" stroke="#ec4899" stroke-width="7">ZONE</text>
</g>
<!-- Droplet Accents -->
<g fill="#ec4899" filter="url(#hGlow)" transform="translate(0, 50)">
<path d="M 50 175 C 50 195 42 210 42 220 C 42 225 48 227 51 222 C 56 210 59 195 59 175 Z"/>
<path d="M 210 175 C 210 205 200 230 200 245 C 200 252 207 254 210 246 C 218 230 222 205 222 175 Z"/>
<path d="M 420 175 C 420 200 412 225 412 240 C 412 247 419 248 422 242 C 428 225 432 200 432 175 Z"/>
<path d="M 610 175 C 610 210 600 245 600 260 C 600 268 608 270 611 260 C 620 240 625 210 625 175 Z"/>
</g>
<!-- Tagline Subtitle -->
<g transform="translate(0, 310)">
<text x="0" y="0" class="h-tagline-font" font-size="20" fill="#ffffff" letter-spacing="0.28em">
ROPA URBANA Y ZAPATILLAS DEPORTIVAS
</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

117
dripzone-app/public/dripzone_logo_stacked.svg Normal file
View File

@ -0,0 +1,117 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 700" width="100%" height="100%">
<defs>
<!-- Radial Ambient Glow -->
<radialGradient id="sBgGlow" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#9333ea" stop-opacity="0.45"/>
<stop offset="70%" stop-color="#3b0764" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#09090b" stop-opacity="0"/>
</radialGradient>
<!-- Chrome & Neon Gradients -->
<linearGradient id="sChromeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#f5d0fe"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="85%" stop-color="#581c87"/>
<stop offset="100%" stop-color="#3b0764"/>
</linearGradient>
<linearGradient id="sZoneGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#fbcfe8"/>
<stop offset="50%" stop-color="#ec4899"/>
<stop offset="85%" stop-color="#9d174d"/>
<stop offset="100%" stop-color="#500724"/>
</linearGradient>
<linearGradient id="sGlowBorder" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ec4899"/>
<stop offset="50%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#6366f1"/>
</linearGradient>
<filter id="sGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="6" result="b1"/>
<feGaussianBlur stdDeviation="14" result="b2"/>
<feMerge>
<feMergeNode in="b2"/>
<feMergeNode in="b1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&amp;family=Outfit:wght@800;900&amp;display=swap');
.s-drip-font {
font-family: 'Outfit', 'Montserrat', -apple-system, sans-serif;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
}
.s-tagline-font {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
}
</style>
<!-- Ambient Glow -->
<rect x="0" y="0" width="600" height="700" fill="url(#sBgGlow)"/>
<!-- Top Center: Glowing "D" Sneaker Emblem -->
<g transform="translate(65, -20) scale(0.94)">
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="url(#sGlowBorder)" stroke-width="12" stroke-linecap="round" filter="url(#sGlow)" opacity="0.9"/>
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
<path d="M 140 135 C 160 110 200 100 230 100 C 270 100 300 120 320 150 C 290 140 260 140 230 145 C 190 150 160 170 140 195 Z"
fill="url(#sGlowBorder)" filter="url(#sGlow)"/>
<g filter="url(#sGlow)">
<path d="M 145 130 L 240 130 C 330 130 380 180 380 260 C 380 340 320 390 240 390 L 165 390 C 160 410 155 435 150 455 C 146 470 135 470 135 450 C 135 425 140 405 140 390 L 130 390 C 120 390 115 380 115 370 L 115 150 C 115 135 125 130 145 130 Z"
fill="url(#sChromeGrad)" stroke="url(#sGlowBorder)" stroke-width="7"/>
<path d="M 185 390 C 185 430 175 450 175 465 C 175 475 185 478 188 468 C 195 445 200 415 200 390 Z" fill="#c084fc"/>
<path d="M 245 390 C 245 440 235 470 235 490 C 235 498 245 500 248 490 C 258 460 265 420 265 390 Z" fill="#c084fc"/>
<path d="M 175 180 L 230 180 C 285 180 315 210 315 260 C 315 310 285 340 230 340 L 175 340 Z" fill="#09090b" stroke="url(#sGlowBorder)" stroke-width="5"/>
</g>
<g filter="url(#sGlow)" transform="translate(145, 175) scale(0.48)">
<path d="M 30 290 C 80 290 120 295 180 295 C 240 295 300 290 340 285 C 370 280 395 260 405 235 C 410 220 405 210 390 210 C 365 210 340 225 310 230 C 250 240 180 240 120 235 C 70 230 40 235 25 255 C 15 270 18 290 30 290 Z"
fill="#c084fc" stroke="#ffffff" stroke-width="4"/>
<path d="M 70 240 L 110 140 C 120 115 140 95 170 90 L 220 85 C 235 85 245 95 245 110 L 245 140 L 280 160 C 310 180 340 195 380 205 L 360 235 C 300 235 240 235 180 230 L 70 240 Z"
fill="url(#sChromeGrad)" stroke="#f0abfc" stroke-width="5"/>
<line x1="175" y1="135" x2="210" y2="150" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="195" y1="155" x2="235" y2="170" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
<line x1="220" y1="175" x2="260" y2="190" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
</g>
</g>
<!-- Bottom Center: Typography DRIPZONE -->
<g transform="translate(300, 520)" filter="url(#sGlow)">
<text x="0" y="0" text-anchor="middle" class="s-drip-font" font-size="102">
<tspan fill="url(#sChromeGrad)" stroke="#9333ea" stroke-width="6">DRIP</tspan>
<tspan fill="url(#sZoneGrad)" stroke="#ec4899" stroke-width="6">ZONE</tspan>
</text>
</g>
<!-- Molten Drops under DRIPZONE -->
<g fill="#ec4899" filter="url(#sGlow)" transform="translate(300, 520)">
<path d="M -180 0 C -180 20 -185 30 -185 38 C -185 43 -180 44 -178 40 C -173 30 -170 20 -170 0 Z"/>
<path d="M -80 0 C -80 25 -88 45 -88 55 C -88 60 -82 61 -80 55 C -74 40 -70 25 -70 0 Z"/>
<path d="M 60 0 C 60 25 52 45 52 55 C 52 60 58 61 60 55 C 66 40 70 25 70 0 Z"/>
<path d="M 180 0 C 180 20 175 30 175 38 C 175 43 180 44 182 40 C 187 30 190 20 190 0 Z"/>
</g>
<!-- Tagline Subtitle -->
<g transform="translate(300, 620)">
<text x="0" y="0" text-anchor="middle" class="s-tagline-font" font-size="18" fill="#f0abfc" opacity="0.8" filter="url(#sGlow)">
ROPA URBANA Y ZAPATILLAS DEPORTIVAS
</text>
<text x="0" y="0" text-anchor="middle" class="s-tagline-font" font-size="18" fill="#ffffff">
ROPA URBANA Y ZAPATILLAS DEPORTIVAS
</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

122
dripzone-app/public/dripzone_wordmark.svg Normal file
View File

@ -0,0 +1,122 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 320" width="100%" height="100%">
<defs>
<!-- Chrome Horizontal Gradient -->
<linearGradient id="chromeText" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="35%" stop-color="#f5d0fe"/>
<stop offset="48%" stop-color="#c084fc"/>
<stop offset="52%" stop-color="#7e22ce"/>
<stop offset="80%" stop-color="#a855f7"/>
<stop offset="100%" stop-color="#ffffff"/>
</linearGradient>
<!-- Zone Accent Gradient -->
<linearGradient id="zoneText" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="35%" stop-color="#fbcfe8"/>
<stop offset="48%" stop-color="#f472b6"/>
<stop offset="52%" stop-color="#be185d"/>
<stop offset="80%" stop-color="#ec4899"/>
<stop offset="100%" stop-color="#ffffff"/>
</linearGradient>
<!-- Neon Glow Filter -->
<filter id="wordGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur1"/>
<feGaussianBlur stdDeviation="18" result="blur2"/>
<feMerge>
<feMergeNode in="blur2"/>
<feMergeNode in="blur1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&amp;family=Outfit:wght@800;900&amp;display=swap');
.drip-font {
font-family: 'Outfit', 'Montserrat', -apple-system, sans-serif;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
}
.tagline-font {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
}
</style>
<!-- Ambient Glow Behind Letters -->
<ellipse cx="450" cy="140" rx="420" ry="80" fill="#9333ea" opacity="0.25" filter="url(#wordGlow)"/>
<!-- Main Wordmark: DRIP ZONE -->
<g filter="url(#wordGlow)">
<!-- DRIP -->
<text x="50" y="175"
class="drip-font"
font-size="145"
letter-spacing="2"
fill="url(#chromeText)"
stroke="#9333ea"
stroke-width="7"
stroke-linejoin="round">DRIP</text>
<!-- ZONE -->
<text x="430" y="175"
class="drip-font"
font-size="145"
letter-spacing="2"
fill="url(#zoneText)"
stroke="#ec4899"
stroke-width="7"
stroke-linejoin="round">ZONE</text>
</g>
<!-- Droplets Drip Accents under typography -->
<g fill="#ec4899" filter="url(#wordGlow)" transform="translate(0, 10)">
<!-- Drop under D -->
<path d="M 105 175 C 105 195 98 210 98 220 C 98 225 104 227 107 222 C 112 210 115 195 115 175 Z"/>
<circle cx="102" cy="223" r="4.5" fill="#f0abfc"/>
<!-- Drop under R -->
<path d="M 230 175 C 230 205 220 230 220 245 C 220 252 227 254 230 246 C 238 230 242 205 242 175 Z"/>
<circle cx="225" cy="248" r="5" fill="#f0abfc"/>
<!-- Drop under P -->
<path d="M 360 175 C 360 195 352 215 352 225 C 352 230 358 230 361 224 C 367 210 370 195 370 175 Z"/>
<circle cx="356" cy="227" r="4.5" fill="#f0abfc"/>
<!-- Drop under Z -->
<path d="M 485 175 C 485 200 478 225 478 240 C 478 247 485 248 488 242 C 494 225 498 200 498 175 Z"/>
<circle cx="482" cy="243" r="5" fill="#f0abfc"/>
<!-- Drop under N -->
<path d="M 685 175 C 685 210 675 245 675 260 C 675 268 683 270 686 260 C 695 240 700 210 700 175 Z"/>
<circle cx="680" cy="263" r="5.5" fill="#f0abfc"/>
<!-- Drop under E -->
<path d="M 810 175 C 810 195 802 215 802 225 C 802 230 808 230 811 224 C 817 210 820 195 820 175 Z"/>
<circle cx="806" cy="227" r="4.5" fill="#f0abfc"/>
</g>
<!-- Tagline Banner in Spanish -->
<g transform="translate(450, 275)">
<!-- Subtitle Glow -->
<text x="0" y="0"
text-anchor="middle"
class="tagline-font"
font-size="21"
fill="#f0abfc"
opacity="0.8"
filter="url(#wordGlow)">ROPA URBANA Y ZAPATILLAS DEPORTIVAS</text>
<!-- Subtitle Crisp White Text -->
<text x="0" y="0"
text-anchor="middle"
class="tagline-font"
font-size="21"
fill="#ffffff">ROPA URBANA Y ZAPATILLAS DEPORTIVAS</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB