Mauri
393f6b0dc3
- Arista Pro Alternate Regular self-hosted (font corporativa) - Toggle theme con CSS variables y @custom-variant dark - 6 servicios en 3 categorías (Hosting & Correo / Diseño & Contenido / Infraestructura) - 3 planes destacados (Básico USD 59, Institucional USD 129, E-commerce USD 219) - Datacenters en 4 países (Canadá, USA, Alemania, Uruguay) sin ciudades en el sitio - Sede operativa en Maldonado, Uruguay - i18n es/en con contenido duplicado en Keystatic - Endpoint PHP para form de contacto con PHPMailer + reCAPTCHA v3 + honeypot + rate limit - WorldMap con animación SVG de los 4 países - 29 páginas generadas, 0 JS por default - Sitemap auto + robots.txt - JSON-LD Organization + ProfessionalService con areaServed
70 lines
3.5 KiB
Plaintext
70 lines
3.5 KiB
Plaintext
---
|
|
interface Props {
|
|
class?: string;
|
|
}
|
|
const { class: className = '' } = Astro.props;
|
|
---
|
|
<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" class={className} aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="mapGrad" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0" stop-color="#EE7623" stop-opacity="0.05"/>
|
|
<stop offset="1" stop-color="#EE7623" stop-opacity="0.12"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<path
|
|
d="M 130,140 Q 90,180 110,230 Q 90,290 140,330 Q 180,360 230,340 Q 280,330 290,290 Q 320,250 300,210 Q 280,160 230,140 Q 180,120 130,140 Z"
|
|
fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
|
|
/>
|
|
<path
|
|
d="M 280,180 Q 320,150 380,160 Q 440,150 470,180 Q 480,210 460,240 Q 420,270 380,260 Q 330,250 300,230 Q 270,210 280,180 Z"
|
|
fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
|
|
/>
|
|
<path
|
|
d="M 470,200 Q 510,180 560,190 Q 610,200 620,240 Q 600,280 550,290 Q 500,290 470,260 Q 450,230 470,200 Z"
|
|
fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
|
|
/>
|
|
<path
|
|
d="M 620,290 Q 670,300 720,330 Q 770,360 800,400 Q 820,440 780,460 Q 730,470 680,440 Q 640,410 620,370 Q 600,330 620,290 Z"
|
|
fill="url(#mapGrad)" stroke="var(--color-hds-naranja)" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.5"
|
|
/>
|
|
|
|
<g>
|
|
<circle cx="170" cy="240" r="8" fill="var(--color-hds-naranja)">
|
|
<animate attributeName="r" values="6;10;6" dur="2.5s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="170" cy="240" r="5" fill="var(--color-hds-naranja)"/>
|
|
<text x="170" y="220" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Canadá</text>
|
|
</g>
|
|
|
|
<g>
|
|
<circle cx="370" cy="210" r="8" fill="var(--color-hds-naranja)">
|
|
<animate attributeName="r" values="6;10;6" dur="2.5s" begin="0.4s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="0.4s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="370" cy="210" r="5" fill="var(--color-hds-naranja)"/>
|
|
<text x="370" y="190" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">USA</text>
|
|
</g>
|
|
|
|
<g>
|
|
<circle cx="540" cy="230" r="8" fill="var(--color-hds-naranja)">
|
|
<animate attributeName="r" values="6;10;6" dur="2.5s" begin="0.8s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="0.8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="540" cy="230" r="5" fill="var(--color-hds-naranja)"/>
|
|
<text x="540" y="210" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Alemania</text>
|
|
</g>
|
|
|
|
<g>
|
|
<circle cx="720" cy="390" r="10" fill="var(--color-hds-naranja)">
|
|
<animate attributeName="r" values="8;14;8" dur="2.5s" begin="1.2s" repeatCount="indefinite"/>
|
|
<animate attributeName="opacity" values="0.4;0;0.4" dur="2.5s" begin="1.2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="720" cy="390" r="6" fill="var(--color-hds-naranja)"/>
|
|
<circle cx="720" cy="390" r="2.5" fill="white"/>
|
|
<text x="720" y="370" text-anchor="middle" font-size="14" font-weight="600" fill="var(--hds-fg)">Uruguay</text>
|
|
<text x="720" y="425" text-anchor="middle" font-size="10" fill="var(--hds-fg-muted)">Sede operativa</text>
|
|
</g>
|
|
</svg>
|