Mauri
79fc763025
- 9 planes de hosting con tabla completa de Mauri (USD/año) - /servicios muestra los 3 servicios a medida + 9 planes categorizados - /planes: 3 destacados + grilla con los 6 restantes - 404 con robot SVG animado tomando mate (pronet.uy + peugeot style) - Cloud dividers SVG entre secciones de la home - Scroll reveal animations (.reveal + .stagger con IntersectionObserver) - Galería de imágenes stock (datacenters, cables, código) en AVIF + WebP + JPG - Sección de testimonios con placeholder honesto (Working on it) - Back-to-top arreglado: ahora usa color naranja + icono blanco, visible en ambos temas - WorldMap con animación SVG de 4 países - Toggle light/dark funcional con anti-flash script - Footer siempre dark con Maldonado, Uruguay - i18n es/en con toggle y contenido bilingüe Tech: Astro 5 + Tailwind v4 + Keystatic + Gitea + lftp
55 lines
3.1 KiB
Plaintext
55 lines
3.1 KiB
Plaintext
---
|
|
interface Props {
|
|
lang: 'es' | 'en';
|
|
}
|
|
const { lang } = Astro.props;
|
|
|
|
const items = [
|
|
{ initials: 'M', name: 'Mauricio', role: lang === 'en' ? 'Founder & SysAdmin' : 'Fundador y SysAdmin', quote: lang === 'en' ? 'We answer the phone. That is the whole point.' : 'Atendemos el teléfono. Ese es todo el punto.' },
|
|
{ initials: '?', name: lang === 'en' ? 'Your client here' : 'Tu cliente acá', role: lang === 'en' ? 'Reserved spot' : 'Espacio reservado', quote: lang === 'en' ? 'This space is for your first testimonial.' : 'Este espacio es para tu primer testimonio.' },
|
|
{ initials: '?', name: lang === 'en' ? 'Coming soon' : 'Próximamente', role: lang === 'en' ? 'Reserved spot' : 'Espacio reservado', quote: lang === 'en' ? 'Tell us when a client is happy and we add it here.' : 'Contanos cuando un cliente esté conforme y lo sumamos acá.' },
|
|
];
|
|
---
|
|
<section class="py-20 md:py-28" style="background: var(--hds-bg-soft);">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12 reveal">
|
|
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold tracking-[0.2em] uppercase" style="background: var(--hds-bg); color: var(--color-hds-naranja);">
|
|
{lang === 'en' ? 'Testimonials' : 'Testimonios'}
|
|
</span>
|
|
<h2 class="font-display mt-4" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
|
|
{lang === 'en' ? 'What clients say' : 'Lo que dicen los clientes'}.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 stagger">
|
|
{items.map((item, idx) => (
|
|
<article class="rounded-2xl p-8 relative" style={`background: var(--hds-card); border: 1px solid var(--hds-line); ${idx === 0 ? 'border-color: var(--color-hds-naranja); border-width: 1.5px;' : ''}`}>
|
|
<svg class="absolute top-6 right-6 opacity-20" width="40" height="40" viewBox="0 0 24 24" fill="var(--color-hds-naranja)" aria-hidden="true">
|
|
<path d="M3 21c3 0 7-1 7-8V5H3v6h3c0 4-1 5-3 5v5zm10 0c3 0 7-1 7-8V5h-7v6h3c0 4-1 5-3 5v5z"/>
|
|
</svg>
|
|
|
|
<div class="flex items-center gap-3 mb-5">
|
|
<div class="w-12 h-12 rounded-full flex items-center justify-center font-display text-xl" style={`background: ${idx === 0 ? 'var(--color-hds-naranja)' : 'var(--hds-bg-soft)'}; color: ${idx === 0 ? 'white' : 'var(--color-hds-naranja)'};`}>
|
|
{item.initials}
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-sm" style="color: var(--hds-fg);">{item.name}</div>
|
|
<div class="text-xs" style="color: var(--hds-fg-muted);">{item.role}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<blockquote class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
|
|
"{item.quote}"
|
|
</blockquote>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
<div class="mt-10 text-center">
|
|
<p class="text-sm italic" style="color: var(--hds-fg-muted);">
|
|
{lang === 'en' ? 'Customer testimonials are published with explicit consent. Working on it.' : 'Los testimonios se publican con consentimiento explícito del cliente. Working on it.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|