Mauri
a6ca849630
- Ocultar sección de testimonios en la home (Working on it hasta tener contenido real) - Cambiar horario comercial de 9-18 a 10-18 hs UYT - Quitar 'Técnico: USD X' y 'X USD/MB' de la web (Mauri pidió sacarlo) - Crear /en/index.astro que faltaba — el toggle inglés daba 403 porque no había index.html en /en/
67 lines
2.9 KiB
Plaintext
67 lines
2.9 KiB
Plaintext
---
|
|
import { monthlyEquivalent, type Plan } from '@/lib/pricing';
|
|
|
|
interface Props {
|
|
plans: Plan[];
|
|
whatsappUrl: string;
|
|
}
|
|
|
|
const { plans, whatsappUrl } = Astro.props;
|
|
---
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
|
|
{plans.map((plan) => (
|
|
<div
|
|
class="relative rounded-2xl p-8 transition-all flex flex-col h-full group hover:-translate-y-1"
|
|
style={plan.recommended
|
|
? `background: var(--hds-card); border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 48px rgba(238,118,35,0.18);`
|
|
: `background: var(--hds-card); border: 1px solid var(--hds-line);`}
|
|
>
|
|
{plan.recommended && (
|
|
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2 text-[11px] font-bold tracking-[0.2em] uppercase px-4 py-1.5 rounded-full whitespace-nowrap" style="background: var(--color-hds-naranja); color: white; box-shadow: 0 4px 16px rgba(238,118,35,0.4);">
|
|
⭐ Recomendado
|
|
</div>
|
|
)}
|
|
|
|
<div class="mb-6">
|
|
<div class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style={`color: ${plan.recommended ? 'var(--color-hds-naranja)' : 'var(--hds-fg-muted)'};`}>
|
|
{plan.name}
|
|
</div>
|
|
<div class="flex items-baseline gap-1.5">
|
|
<span class="text-2xl font-semibold" style="color: var(--hds-fg);">USD</span>
|
|
<span class="font-display leading-none" style="font-size: 4.5rem; color: var(--hds-fg); font-weight: 500; letter-spacing: -0.03em;">{plan.priceUsdYear}</span>
|
|
</div>
|
|
<div class="text-sm mt-2" style="color: var(--hds-fg-muted);">
|
|
por año · ~USD {monthlyEquivalent(plan.priceUsdYear)}/mes
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t pt-6 mb-6 flex-grow" style="border-color: var(--hds-line);">
|
|
<ul class="space-y-2.5 text-sm" style="color: var(--hds-fg-soft);">
|
|
{plan.features.slice(0, 6).map((feature) => (
|
|
<li class="flex items-start gap-2.5">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5" style="color: var(--color-hds-naranja);" aria-hidden="true">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
{plan.features.length > 6 && (
|
|
<li class="text-xs italic" style="color: var(--hds-fg-muted);">
|
|
+ {plan.features.length - 6} características más
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
|
|
<a
|
|
href={`https://wa.me/59899812487?text=${encodeURIComponent(`Hola, me interesa el plan ${plan.name} (USD ${plan.priceUsdYear}/año)`)}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class={plan.recommended ? 'btn-primary justify-center' : 'btn-secondary justify-center'}
|
|
>
|
|
Elegir {plan.name}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|