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
48 lines
1.8 KiB
Plaintext
48 lines
1.8 KiB
Plaintext
---
|
|
import SectionEyebrow from './SectionEyebrow.astro';
|
|
import type { TranslationKey } from '@/i18n/ui';
|
|
import MateIcon from './icons/MateIcon.astro';
|
|
import SovereigntyIcon from './icons/SovereigntyIcon.astro';
|
|
import GlobeIcon from './icons/GlobeIcon.astro';
|
|
|
|
interface Props {
|
|
t: (key: TranslationKey) => string;
|
|
}
|
|
const { t } = Astro.props;
|
|
|
|
const items = [
|
|
{ Icon: MateIcon, titleKey: 'diff.support.title' as TranslationKey, bodyKey: 'diff.support.body' as TranslationKey },
|
|
{ Icon: SovereigntyIcon, titleKey: 'diff.sovereignty.title' as TranslationKey, bodyKey: 'diff.sovereignty.body' as TranslationKey },
|
|
{ Icon: GlobeIcon, titleKey: 'diff.infra.title' as TranslationKey, bodyKey: 'diff.infra.body' as TranslationKey },
|
|
];
|
|
---
|
|
<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="max-w-3xl mb-14 md:mb-20">
|
|
<SectionEyebrow text={t('diff.eyebrow')} />
|
|
<h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
|
|
{t('diff.title')}
|
|
</h2>
|
|
<p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
|
|
{t('diff.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{items.map((item) => (
|
|
<article class="service-card">
|
|
<div class="icon-circle mb-6">
|
|
<item.Icon class="w-7 h-7" />
|
|
</div>
|
|
<h3 class="text-xl md:text-2xl font-semibold mb-3" style="color: var(--hds-fg);">
|
|
{t(item.titleKey)}
|
|
</h3>
|
|
<p class="text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
|
|
{t(item.bodyKey)}
|
|
</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|