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
2026-06-09 17:03:26 -03:00
parent ed552fae06
commit 22a90689ae
4 changed files with 168 additions and 202 deletions
-21
View File
@@ -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' }, { label: t('nav.contact'), href: lang === 'en' ? '/en/contacto/' : '/contacto/', key: 'nav.contact' },
]; ];
const whatsappUrl = 'https://wa.me/59899812487';
const isActive = (href: string) => { const isActive = (href: string) => {
const normalized = path.replace(/\/$/, '') || '/'; const normalized = path.replace(/\/$/, '') || '/';
const target = href.replace(/\/$/, '') || '/'; const target = href.replace(/\/$/, '') || '/';
@@ -64,18 +63,6 @@ const isActive = (href: string) => {
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<LangToggle lang={lang} /> <LangToggle lang={lang} />
<ThemeToggle 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 <button
type="button" type="button"
class="lg:hidden p-2 -mr-2" class="lg:hidden p-2 -mr-2"
@@ -105,14 +92,6 @@ const isActive = (href: string) => {
{item.label} {item.label}
</a> </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> </nav>
</div> </div>
</div> </div>
-2
View File
@@ -6,7 +6,6 @@ export const ui = {
'nav.about': 'Nosotros', 'nav.about': 'Nosotros',
'nav.tutorials': 'Instructivos', 'nav.tutorials': 'Instructivos',
'nav.contact': 'Contacto', 'nav.contact': 'Contacto',
'nav.cta': 'Hablar por WhatsApp',
'hero.eyebrow': 'Premium hosting · Desde 2000', 'hero.eyebrow': 'Premium hosting · Desde 2000',
'hero.title': 'Alojamiento en la nube que te conoce.', '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.', '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.about': 'About',
'nav.tutorials': 'Tutorials', 'nav.tutorials': 'Tutorials',
'nav.contact': 'Contact', 'nav.contact': 'Contact',
'nav.cta': 'Chat on WhatsApp',
'hero.eyebrow': 'Premium hosting · Since 2000', 'hero.eyebrow': 'Premium hosting · Since 2000',
'hero.title': 'Cloud hosting that knows you.', '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.', '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.',
+21 -29
View File
@@ -5,13 +5,24 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
title="404 — Ups, el server se fue a buscar yerba" 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." 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="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="relative max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 w-full text-center">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1" aria-hidden="true"> <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>
<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>
<div class="mb-8" aria-hidden="true">
<picture> <picture>
<source type="image/avif" srcset="/images/404/robo-mate.avif" /> <source type="image/avif" srcset="/images/404/robo-mate.avif" />
<source type="image/webp" srcset="/images/404/robo-mate.webp" /> <source type="image/webp" srcset="/images/404/robo-mate.webp" />
@@ -20,7 +31,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
alt="Robot tomando mate con cara de vago" alt="Robot tomando mate con cara de vago"
width="800" width="800"
height="436" height="436"
class="w-full max-w-md mx-auto h-auto" class="w-full max-w-lg mx-auto h-auto"
loading="eager" loading="eager"
decoding="async" decoding="async"
onerror="this.style.display='none'; document.getElementById('robot-fallback').style.display='block';" onerror="this.style.display='none'; document.getElementById('robot-fallback').style.display='block';"
@@ -28,7 +39,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</picture> </picture>
<div id="robot-fallback" style="display:none;" aria-hidden="true"> <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"> <svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-lg mx-auto">
<defs> <defs>
<linearGradient id="bg-grad" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="bg-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FAF6EE" stop-opacity="0"/> <stop offset="0%" stop-color="#FAF6EE" stop-opacity="0"/>
@@ -147,36 +158,19 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div> </div>
</div> </div>
<div class="order-1 lg:order-2 text-center lg:text-left"> <p class="text-lg mb-8 max-w-md mx-auto" style="color: var(--hds-fg-soft);">
<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>
<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. 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> </p>
<div class="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start"> <div class="flex justify-center mb-12">
<a href="/" class="btn-primary text-sm"> <a href="/" class="btn-primary text-sm">
Volver al inicio Volver al inicio
</a> </a>
<a href="https://wa.me/59899812487" target="_blank" rel="noopener noreferrer" class="btn-secondary text-sm">
Pedinos ayuda por WhatsApp
</a>
</div> </div>
<!--#if expr="$REMOTE_ADDR" --> <!--#if expr="$REMOTE_ADDR" -->
<div class="mt-10 pt-6 border-t" style="border-color: var(--hds-line);"> <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" style="color: var(--color-hds-naranja);"> <p class="text-xs font-semibold tracking-[0.2em] uppercase mb-3 text-center" style="color: var(--color-hds-naranja);">
Detalles técnicos Detalles técnicos
</p> </p>
<dl class="text-xs space-y-1.5" style="color: var(--hds-fg-muted); font-family: ui-monospace, monospace;"> <dl class="text-xs space-y-1.5" style="color: var(--hds-fg-muted); font-family: ui-monospace, monospace;">
@@ -204,7 +198,5 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div> </div>
<!--#endif --> <!--#endif -->
</div> </div>
</div>
</div>
</section> </section>
</BaseLayout> </BaseLayout>
-3
View File
@@ -6,7 +6,6 @@ import DifferenceCards from '@/components/DifferenceCards.astro';
import CloudDivider from '@/components/CloudDivider.astro'; import CloudDivider from '@/components/CloudDivider.astro';
import ServicesSection from '@/components/ServicesSection.astro'; import ServicesSection from '@/components/ServicesSection.astro';
import ProcessSteps from '@/components/ProcessSteps.astro'; import ProcessSteps from '@/components/ProcessSteps.astro';
import GalleryMosaic from '@/components/GalleryMosaic.astro';
import Testimonials from '@/components/Testimonials.astro'; import Testimonials from '@/components/Testimonials.astro';
import FAQAccordion from '@/components/FaqSection.astro'; import FAQAccordion from '@/components/FaqSection.astro';
import CtaFinal from '@/components/CtaFinal.astro'; import CtaFinal from '@/components/CtaFinal.astro';
@@ -40,8 +39,6 @@ const description = lang === 'en'
<ProcessSteps t={t} /> <ProcessSteps t={t} />
<GalleryMosaic lang={lang} />
<FAQAccordion lang={lang} /> <FAQAccordion lang={lang} />
<CtaFinal t={t} whatsappUrl={whatsappUrl} /> <CtaFinal t={t} whatsappUrl={whatsappUrl} />