fix: quitar botón WhatsApp del Navbar, galería IA de home, restructurar 404 centrado
- Navbar: eliminar botón naranja 'Hablar por WhatsApp' (queda solo el FAB flotante)
- Home: quitar sección GalleryMosaic ('Nuestro Trabajo / Detrás de escena')
- 404: estructura centrada vertical/horizontal, sin subtitular ni CTA de WA, con detalles técnicos SSI intactos
This commit is contained in:
Mauri
@@ -22,7 +22,6 @@ const navItems: { label: string; href: string; key: TranslationKey }[] = [
|
||||
{ label: t('nav.contact'), href: lang === 'en' ? '/en/contacto/' : '/contacto/', key: 'nav.contact' },
|
||||
];
|
||||
|
||||
const whatsappUrl = 'https://wa.me/59899812487';
|
||||
const isActive = (href: string) => {
|
||||
const normalized = path.replace(/\/$/, '') || '/';
|
||||
const target = href.replace(/\/$/, '') || '/';
|
||||
@@ -64,18 +63,6 @@ const isActive = (href: string) => {
|
||||
<div class="flex items-center gap-2">
|
||||
<LangToggle lang={lang} />
|
||||
<ThemeToggle lang={lang} />
|
||||
<a
|
||||
href={whatsappUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hidden md:inline-flex btn-primary text-sm"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
|
||||
</svg>
|
||||
<span>{t('nav.cta')}</span>
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="lg:hidden p-2 -mr-2"
|
||||
@@ -105,14 +92,6 @@ const isActive = (href: string) => {
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href={whatsappUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="md:hidden inline-flex items-center justify-center gap-2 btn-primary text-sm mt-2"
|
||||
>
|
||||
<span>{t('nav.cta')}</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,6 @@ export const ui = {
|
||||
'nav.about': 'Nosotros',
|
||||
'nav.tutorials': 'Instructivos',
|
||||
'nav.contact': 'Contacto',
|
||||
'nav.cta': 'Hablar por WhatsApp',
|
||||
'hero.eyebrow': 'Premium hosting · Desde 2000',
|
||||
'hero.title': 'Alojamiento en la nube que te conoce.',
|
||||
'hero.body': 'Soporte humano senior en Maldonado, Uruguay. Del otro lado hay una persona que conoce tu proyecto, no un ticket automático. La misma tecnología que los gigantes, con la cercanía que nos diferencia.',
|
||||
@@ -72,7 +71,6 @@ export const ui = {
|
||||
'nav.about': 'About',
|
||||
'nav.tutorials': 'Tutorials',
|
||||
'nav.contact': 'Contact',
|
||||
'nav.cta': 'Chat on WhatsApp',
|
||||
'hero.eyebrow': 'Premium hosting · Since 2000',
|
||||
'hero.title': 'Cloud hosting that knows you.',
|
||||
'hero.body': 'Senior human support in Maldonado, Uruguay. There is a real person who knows your project on the other side, not an automatic ticket. The same technology as the tech giants, with the closeness that sets us apart.',
|
||||
|
||||
+168
-176
@@ -5,206 +5,198 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
title="404 — Ups, el server se fue a buscar yerba"
|
||||
description="La página que buscás no existe, pero tenemos un robot tomando mate para hacerte compañía."
|
||||
>
|
||||
<section class="relative overflow-hidden py-16 md:py-24 min-h-[80vh] flex items-center" style="background: var(--hds-bg-soft);">
|
||||
<section class="relative overflow-hidden py-16 md:py-20" style="background: var(--hds-bg-soft);">
|
||||
<div class="absolute inset-0 particle-grid opacity-40" aria-hidden="true"></div>
|
||||
|
||||
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="relative max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 w-full text-center">
|
||||
|
||||
<div class="order-2 lg:order-1" aria-hidden="true">
|
||||
<picture>
|
||||
<source type="image/avif" srcset="/images/404/robo-mate.avif" />
|
||||
<source type="image/webp" srcset="/images/404/robo-mate.webp" />
|
||||
<img
|
||||
src="/images/404/robo-mate.png"
|
||||
alt="Robot tomando mate con cara de vago"
|
||||
width="800"
|
||||
height="436"
|
||||
class="w-full max-w-md mx-auto h-auto"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
onerror="this.style.display='none'; document.getElementById('robot-fallback').style.display='block';"
|
||||
/>
|
||||
</picture>
|
||||
<div class="inline-block">
|
||||
<span class="inline-flex items-center gap-3 text-xs font-semibold tracking-[0.25em] uppercase" style="color: var(--color-hds-naranja);">
|
||||
<span class="inline-block w-10 h-px" style="background: var(--color-hds-naranja);"></span>
|
||||
Error 404
|
||||
<span class="inline-block w-10 h-px" style="background: var(--color-hds-naranja);"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="robot-fallback" style="display:none;" aria-hidden="true">
|
||||
<svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-md mx-auto">
|
||||
<defs>
|
||||
<linearGradient id="bg-grad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FAF6EE" stop-opacity="0"/>
|
||||
<stop offset="100%" stop-color="#EE7623" stop-opacity="0.08"/>
|
||||
</linearGradient>
|
||||
<filter id="soft-shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="8"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer><feFuncA type="linear" slope="0.15"/></feComponentTransfer>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<h1 class="font-display leading-tight mt-5 mb-8" style="font-size: clamp(2.25rem, 5vw, 3.75rem); color: var(--hds-fg);">
|
||||
Por acá no hay <span style="color: var(--color-hds-naranja); font-style: italic;">nada que ver</span>.
|
||||
</h1>
|
||||
|
||||
<circle cx="240" cy="240" r="220" fill="url(#bg-grad)"/>
|
||||
<div class="mb-8" aria-hidden="true">
|
||||
<picture>
|
||||
<source type="image/avif" srcset="/images/404/robo-mate.avif" />
|
||||
<source type="image/webp" srcset="/images/404/robo-mate.webp" />
|
||||
<img
|
||||
src="/images/404/robo-mate.png"
|
||||
alt="Robot tomando mate con cara de vago"
|
||||
width="800"
|
||||
height="436"
|
||||
class="w-full max-w-lg mx-auto h-auto"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
onerror="this.style.display='none'; document.getElementById('robot-fallback').style.display='block';"
|
||||
/>
|
||||
</picture>
|
||||
|
||||
<g opacity="0.35">
|
||||
<rect x="60" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="68" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="76" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="404" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="412" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="68" y="88" width="8" height="8" fill="#FFCBA1" rx="1"/>
|
||||
<rect x="412" y="88" width="8" height="8" fill="#FFCBA1" rx="1"/>
|
||||
<rect x="60" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="68" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="404" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="412" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="68" y="388" width="8" height="8" fill="#FFCBA1" rx="1"/>
|
||||
<rect x="412" y="388" width="8" height="8" fill="#FFCBA1" rx="1"/>
|
||||
</g>
|
||||
<div id="robot-fallback" style="display:none;" aria-hidden="true">
|
||||
<svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-lg mx-auto">
|
||||
<defs>
|
||||
<linearGradient id="bg-grad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FAF6EE" stop-opacity="0"/>
|
||||
<stop offset="100%" stop-color="#EE7623" stop-opacity="0.08"/>
|
||||
</linearGradient>
|
||||
<filter id="soft-shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="8"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer><feFuncA type="linear" slope="0.15"/></feComponentTransfer>
|
||||
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<ellipse cx="240" cy="420" rx="100" ry="10" fill="#EE7623" opacity="0.12"/>
|
||||
<circle cx="240" cy="240" r="220" fill="url(#bg-grad)"/>
|
||||
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="160" y="240" width="160" height="140" rx="20" fill="#E8E2D5" stroke="#EE7623" stroke-width="3"/>
|
||||
<circle cx="200" cy="280" r="6" fill="#EE7623">
|
||||
<animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="200" cy="280" r="6" fill="#EE7623" opacity="0.3"/>
|
||||
<rect x="220" y="276" width="80" height="8" rx="2" fill="#1A1612" opacity="0.15"/>
|
||||
<rect x="220" y="290" width="60" height="6" rx="2" fill="#1A1612" opacity="0.1"/>
|
||||
<circle cx="280" cy="340" r="14" fill="#FAF6EE" stroke="#EE7623" stroke-width="2"/>
|
||||
<circle cx="280" cy="340" r="6" fill="#EE7623"/>
|
||||
</g>
|
||||
<g opacity="0.35">
|
||||
<rect x="60" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="68" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="76" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="404" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="412" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="68" y="88" width="8" height="8" fill="#FFCBA1" rx="1"/>
|
||||
<rect x="412" y="88" width="8" height="8" fill="#FFCBA1" rx="1"/>
|
||||
<rect x="60" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="68" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="404" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="412" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
|
||||
<rect x="68" y="388" width="8" height="8" fill="#FFCBA1" rx="1"/>
|
||||
<rect x="412" y="388" width="8" height="8" fill="#FFCBA1" rx="1"/>
|
||||
</g>
|
||||
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="170" y="100" width="140" height="140" rx="24" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
</g>
|
||||
<ellipse cx="240" cy="420" rx="100" ry="10" fill="#EE7623" opacity="0.12"/>
|
||||
|
||||
<line x1="240" y1="100" x2="240" y2="68" stroke="#EE7623" stroke-width="4" stroke-linecap="round"/>
|
||||
<circle cx="240" cy="60" r="8" fill="#EE7623">
|
||||
<animate attributeName="r" values="6;9;6" dur="2s" repeatCount="indefinite"/>
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="160" y="240" width="160" height="140" rx="20" fill="#E8E2D5" stroke="#EE7623" stroke-width="3"/>
|
||||
<circle cx="200" cy="280" r="6" fill="#EE7623">
|
||||
<animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="200" cy="280" r="6" fill="#EE7623" opacity="0.3"/>
|
||||
<rect x="220" y="276" width="80" height="8" rx="2" fill="#1A1612" opacity="0.15"/>
|
||||
<rect x="220" y="290" width="60" height="6" rx="2" fill="#1A1612" opacity="0.1"/>
|
||||
<circle cx="280" cy="340" r="14" fill="#FAF6EE" stroke="#EE7623" stroke-width="2"/>
|
||||
<circle cx="280" cy="340" r="6" fill="#EE7623"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path d="M 200 165 Q 210 172 220 165" stroke="#1A1612" stroke-width="4" fill="none" stroke-linecap="round"/>
|
||||
<line x1="195" y1="158" x2="225" y2="155" stroke="#1A1612" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
<path d="M 195 158 Q 210 168 225 158" stroke="#1A1612" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="170" y="100" width="140" height="140" rx="24" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<ellipse cx="260" cy="167" rx="10" ry="12" fill="#FAF6EE" stroke="#1A1612" stroke-width="2"/>
|
||||
<circle cx="263" cy="170" r="5" fill="#1A1612"/>
|
||||
<circle cx="264" cy="167" r="2" fill="#FAF6EE"/>
|
||||
</g>
|
||||
<line x1="240" y1="100" x2="240" y2="68" stroke="#EE7623" stroke-width="4" stroke-linecap="round"/>
|
||||
<circle cx="240" cy="60" r="8" fill="#EE7623">
|
||||
<animate attributeName="r" values="6;9;6" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<ellipse cx="190" cy="195" rx="8" ry="4" fill="#FA9F5C" opacity="0.6"/>
|
||||
<ellipse cx="290" cy="195" rx="8" ry="4" fill="#FA9F5C" opacity="0.6"/>
|
||||
<g>
|
||||
<path d="M 200 165 Q 210 172 220 165" stroke="#1A1612" stroke-width="4" fill="none" stroke-linecap="round"/>
|
||||
<line x1="195" y1="158" x2="225" y2="155" stroke="#1A1612" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
<path d="M 195 158 Q 210 168 225 158" stroke="#1A1612" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
|
||||
<ellipse cx="240" cy="210" rx="14" ry="10" fill="#1A1612"/>
|
||||
<ellipse cx="240" cy="212" rx="10" ry="6" fill="#FAF6EE"/>
|
||||
<line x1="240" y1="205" x2="240" y2="218" stroke="#1A1612" stroke-width="1.5" opacity="0.3"/>
|
||||
<ellipse cx="260" cy="167" rx="10" ry="12" fill="#FAF6EE" stroke="#1A1612" stroke-width="2"/>
|
||||
<circle cx="263" cy="170" r="5" fill="#1A1612"/>
|
||||
<circle cx="264" cy="167" r="2" fill="#FAF6EE"/>
|
||||
</g>
|
||||
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="120" y="180" width="24" height="80" rx="12" fill="#F5EFE3" stroke="#EE7623" stroke-width="3" transform="rotate(-25 132 220)"/>
|
||||
<circle cx="110" cy="170" r="18" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
<line x1="92" y1="160" x2="86" y2="152" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="98" y1="155" x2="94" y2="145" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="106" y1="153" x2="104" y2="142" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="114" y1="156" x2="115" y2="146" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="120" y1="162" x2="124" y2="155" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
</g>
|
||||
<ellipse cx="190" cy="195" rx="8" ry="4" fill="#FA9F5C" opacity="0.6"/>
|
||||
<ellipse cx="290" cy="195" rx="8" ry="4" fill="#FA9F5C" opacity="0.6"/>
|
||||
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="336" y="220" width="24" height="80" rx="12" fill="#F5EFE3" stroke="#EE7623" stroke-width="3" transform="rotate(30 348 260)"/>
|
||||
<circle cx="358" cy="290" r="16" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
</g>
|
||||
<ellipse cx="240" cy="210" rx="14" ry="10" fill="#1A1612"/>
|
||||
<ellipse cx="240" cy="212" rx="10" ry="6" fill="#FAF6EE"/>
|
||||
<line x1="240" y1="205" x2="240" y2="218" stroke="#1A1612" stroke-width="1.5" opacity="0.3"/>
|
||||
|
||||
<g transform="translate(330 280)">
|
||||
<ellipse cx="22" cy="28" rx="24" ry="20" fill="#1A1612"/>
|
||||
<ellipse cx="14" cy="22" rx="6" ry="4" fill="#FAF6EE" opacity="0.2"/>
|
||||
<ellipse cx="22" cy="14" rx="20" ry="5" fill="#EE7623"/>
|
||||
<ellipse cx="22" cy="13" rx="18" ry="3" fill="#FFCBA1"/>
|
||||
<rect x="35" y="6" width="8" height="14" rx="2" fill="#8A8580"/>
|
||||
<rect x="36" y="2" width="6" height="6" rx="1" fill="#C8C2B8"/>
|
||||
<ellipse cx="22" cy="11" rx="14" ry="2" fill="#2E7D5B" opacity="0.8"/>
|
||||
</g>
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="120" y="180" width="24" height="80" rx="12" fill="#F5EFE3" stroke="#EE7623" stroke-width="3" transform="rotate(-25 132 220)"/>
|
||||
<circle cx="110" cy="170" r="18" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
<line x1="92" y1="160" x2="86" y2="152" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="98" y1="155" x2="94" y2="145" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="106" y1="153" x2="104" y2="142" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="114" y1="156" x2="115" y2="146" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="120" y1="162" x2="124" y2="155" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<g opacity="0.4">
|
||||
<path d="M 380 270 Q 384 262 380 254" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 392 270 Q 396 262 392 254" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2.5s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 386 274 Q 390 266 386 258" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2.5s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="336" y="220" width="24" height="80" rx="12" fill="#F5EFE3" stroke="#EE7623" stroke-width="3" transform="rotate(30 348 260)"/>
|
||||
<circle cx="358" cy="290" r="16" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="195" y="380" width="30" height="50" rx="10" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
<rect x="255" y="380" width="30" height="50" rx="10" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
<ellipse cx="210" cy="432" rx="22" ry="8" fill="#EE7623"/>
|
||||
<ellipse cx="270" cy="432" rx="22" ry="8" fill="#EE7623"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<g transform="translate(330 280)">
|
||||
<ellipse cx="22" cy="28" rx="24" ry="20" fill="#1A1612"/>
|
||||
<ellipse cx="14" cy="22" rx="6" ry="4" fill="#FAF6EE" opacity="0.2"/>
|
||||
<ellipse cx="22" cy="14" rx="20" ry="5" fill="#EE7623"/>
|
||||
<ellipse cx="22" cy="13" rx="18" ry="3" fill="#FFCBA1"/>
|
||||
<rect x="35" y="6" width="8" height="14" rx="2" fill="#8A8580"/>
|
||||
<rect x="36" y="2" width="6" height="6" rx="1" fill="#C8C2B8"/>
|
||||
<ellipse cx="22" cy="11" rx="14" ry="2" fill="#2E7D5B" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<div class="order-1 lg:order-2 text-center lg:text-left">
|
||||
<div class="inline-block">
|
||||
<span class="inline-flex items-center gap-3 text-xs font-semibold tracking-[0.25em] uppercase" style="color: var(--color-hds-naranja);">
|
||||
<span class="inline-block w-10 h-px" style="background: var(--color-hds-naranja);"></span>
|
||||
Error 404
|
||||
<span class="inline-block w-10 h-px" style="background: var(--color-hds-naranja);"></span>
|
||||
</span>
|
||||
</div>
|
||||
<g opacity="0.4">
|
||||
<path d="M 380 270 Q 384 262 380 254" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 392 270 Q 396 262 392 254" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2.5s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 386 274 Q 390 266 386 258" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2.5s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<h1 class="font-display leading-tight mt-5 mb-6" style="font-size: clamp(2.25rem, 5vw, 3.75rem); color: var(--hds-fg);">
|
||||
Por acá no hay <span style="color: var(--color-hds-naranja); font-style: italic;">nada que ver</span>.<br/>
|
||||
<span class="text-2xl md:text-3xl" style="color: var(--hds-fg-soft);">El robot estaba tomando mate.</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-lg mb-8 max-w-md mx-auto lg:mx-0" style="color: var(--hds-fg-soft);">
|
||||
La página que buscás no existe, fue movida o la URL está mal escrita. Mientras nuestro robot vuelve a su puesto, te convidamos un mate virtual.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start">
|
||||
<a href="/" class="btn-primary text-sm">
|
||||
Volver al inicio
|
||||
</a>
|
||||
<a href="https://wa.me/59899812487" target="_blank" rel="noopener noreferrer" class="btn-secondary text-sm">
|
||||
Pedinos ayuda por WhatsApp
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--#if expr="$REMOTE_ADDR" -->
|
||||
<div class="mt-10 pt-6 border-t" style="border-color: var(--hds-line);">
|
||||
<p class="text-xs font-semibold tracking-[0.2em] uppercase mb-3" style="color: var(--color-hds-naranja);">
|
||||
Detalles técnicos
|
||||
</p>
|
||||
<dl class="text-xs space-y-1.5" style="color: var(--hds-fg-muted); font-family: ui-monospace, monospace;">
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">URL solicitada:</dt>
|
||||
<dd class="break-all"><!--#echo var="REQUEST_URI" --></dd>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">URL de referencia:</dt>
|
||||
<dd class="break-all"><!--#echo var="HTTP_REFERER" --></dd>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">IP del visitante:</dt>
|
||||
<dd><!--#echo var="REMOTE_ADDR" --></dd>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">Navegador:</dt>
|
||||
<dd class="break-all"><!--#echo var="HTTP_USER_AGENT" --></dd>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">Servidor:</dt>
|
||||
<dd><!--#echo var="SERVER_NAME" --></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<!--#endif -->
|
||||
<g filter="url(#soft-shadow)">
|
||||
<rect x="195" y="380" width="30" height="50" rx="10" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
<rect x="255" y="380" width="30" height="50" rx="10" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
|
||||
<ellipse cx="210" cy="432" rx="22" ry="8" fill="#EE7623"/>
|
||||
<ellipse cx="270" cy="432" rx="22" ry="8" fill="#EE7623"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-lg mb-8 max-w-md mx-auto" style="color: var(--hds-fg-soft);">
|
||||
La página que buscás no existe, fue movida o la URL está mal escrita. Mientras nuestro robot vuelve a su puesto, te convidamos un mate virtual.
|
||||
</p>
|
||||
|
||||
<div class="flex justify-center mb-12">
|
||||
<a href="/" class="btn-primary text-sm">
|
||||
Volver al inicio
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--#if expr="$REMOTE_ADDR" -->
|
||||
<div class="mt-4 pt-6 border-t text-left" style="border-color: var(--hds-line);">
|
||||
<p class="text-xs font-semibold tracking-[0.2em] uppercase mb-3 text-center" style="color: var(--color-hds-naranja);">
|
||||
Detalles técnicos
|
||||
</p>
|
||||
<dl class="text-xs space-y-1.5" style="color: var(--hds-fg-muted); font-family: ui-monospace, monospace;">
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">URL solicitada:</dt>
|
||||
<dd class="break-all"><!--#echo var="REQUEST_URI" --></dd>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">URL de referencia:</dt>
|
||||
<dd class="break-all"><!--#echo var="HTTP_REFERER" --></dd>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">IP del visitante:</dt>
|
||||
<dd><!--#echo var="REMOTE_ADDR" --></dd>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">Navegador:</dt>
|
||||
<dd class="break-all"><!--#echo var="HTTP_USER_AGENT" --></dd>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">Servidor:</dt>
|
||||
<dd><!--#echo var="SERVER_NAME" --></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<!--#endif -->
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
@@ -6,7 +6,6 @@ import DifferenceCards from '@/components/DifferenceCards.astro';
|
||||
import CloudDivider from '@/components/CloudDivider.astro';
|
||||
import ServicesSection from '@/components/ServicesSection.astro';
|
||||
import ProcessSteps from '@/components/ProcessSteps.astro';
|
||||
import GalleryMosaic from '@/components/GalleryMosaic.astro';
|
||||
import Testimonials from '@/components/Testimonials.astro';
|
||||
import FAQAccordion from '@/components/FaqSection.astro';
|
||||
import CtaFinal from '@/components/CtaFinal.astro';
|
||||
@@ -40,8 +39,6 @@ const description = lang === 'en'
|
||||
|
||||
<ProcessSteps t={t} />
|
||||
|
||||
<GalleryMosaic lang={lang} />
|
||||
|
||||
<FAQAccordion lang={lang} />
|
||||
|
||||
<CtaFinal t={t} whatsappUrl={whatsappUrl} />
|
||||
|
||||
Reference in New Issue
Block a user