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
38 lines
1.3 KiB
Plaintext
38 lines
1.3 KiB
Plaintext
---
|
|
interface FaqItem {
|
|
q: string;
|
|
a: string;
|
|
}
|
|
|
|
interface Props {
|
|
items: FaqItem[];
|
|
}
|
|
const { items } = Astro.props;
|
|
|
|
const groupId = `faq-${Math.random().toString(36).slice(2, 8)}`;
|
|
---
|
|
<div class="divide-y" style="border-color: var(--hds-line);">
|
|
{items.map((item, idx) => {
|
|
const inputId = `${groupId}-${idx}`;
|
|
return (
|
|
<details class="group" style="border-color: var(--hds-line);">
|
|
<summary
|
|
class="flex items-start justify-between gap-4 py-5 cursor-pointer list-none transition-colors"
|
|
style="color: var(--hds-fg);"
|
|
>
|
|
<h3 class="text-base md:text-lg font-semibold pr-4">{item.q}</h3>
|
|
<span class="flex-shrink-0 mt-1 icon-circle transition-transform group-open:rotate-45" style="width: 28px; height: 28px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
|
|
<line x1="12" y1="5" x2="12" y2="19"/>
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
<div class="pb-5 pr-12 text-[15px] leading-relaxed" style="color: var(--hds-fg-soft);">
|
|
{item.a}
|
|
</div>
|
|
</details>
|
|
);
|
|
})}
|
|
</div>
|