feat: mejoras en componentes y correcciones ortográficas
- Corrección ortográfica en index.astro (sábados)
- Implementación de prop autoHeight en InitialSection para ajuste dinámico de altura
- Creación del componente PricingCard con diseño responsive
- Creación de PlanDetailsTable con características detalladas de cada plan
- Agregados emojis ✅ a características incluidas en planes
- Actualización de estilos para página de pricing
- Ajustes en el slot extraContent de InitialSection
- Mejoras visuales y estructurales en pricing.astro
This commit is contained in:
BIN
src/assets/imgs/mujer-con-tablet.webp
Normal file
BIN
src/assets/imgs/mujer-con-tablet.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 KiB |
61
src/assets/imgs/phone_with-stats.svg
Normal file
61
src/assets/imgs/phone_with-stats.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 335 KiB |
@@ -2,19 +2,40 @@
|
|||||||
export interface SectionProps {
|
export interface SectionProps {
|
||||||
imgSrc: string;
|
imgSrc: string;
|
||||||
imgAlt: string;
|
imgAlt: string;
|
||||||
|
imgWidth?: number;
|
||||||
|
imgHeight?: number;
|
||||||
|
customXPosition?: string;
|
||||||
logoSrc: string;
|
logoSrc: string;
|
||||||
logoAlt: string;
|
logoAlt: string;
|
||||||
mainTitle: string;
|
mainTitle: string;
|
||||||
subtitle: string;
|
subtitle: string;
|
||||||
buttonText?: string;
|
buttonText?: string;
|
||||||
|
autoHeight?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
|
const {
|
||||||
Astro.props as SectionProps;
|
imgSrc,
|
||||||
|
imgAlt,
|
||||||
|
imgWidth,
|
||||||
|
imgHeight,
|
||||||
|
logoSrc,
|
||||||
|
logoAlt,
|
||||||
|
mainTitle,
|
||||||
|
subtitle,
|
||||||
|
buttonText,
|
||||||
|
customXPosition,
|
||||||
|
autoHeight = false,
|
||||||
|
} = Astro.props as SectionProps;
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="section-1 first-sect-container">
|
<section class="section-1 first-sect-container" data-auto-height={autoHeight}>
|
||||||
<img src={imgSrc} alt={imgAlt} class="main-img" fetchpriority="high" />
|
<img
|
||||||
|
src={imgSrc}
|
||||||
|
alt={imgAlt}
|
||||||
|
class="main-img"
|
||||||
|
fetchpriority="high"
|
||||||
|
style={`width: ${imgWidth ? imgWidth : "auto"}px; height: ${imgHeight ? imgHeight : "auto"}px; ${customXPosition ? `transform: translateX(${customXPosition});` : ""}`}
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="landing-content">
|
<div class="landing-content">
|
||||||
<div class="logo-container">
|
<div class="logo-container">
|
||||||
@@ -41,7 +62,6 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot name="extraContent" />
|
<slot name="extraContent" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,6 +77,12 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
|
|||||||
padding: 80px 300px 0px 300px;
|
padding: 80px 300px 0px 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-1[data-auto-height="true"] {
|
||||||
|
height: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
.main-img {
|
.main-img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
@@ -65,7 +91,7 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
|
|||||||
width: 680px;
|
width: 680px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
transform: translateX(-25%);
|
transform: translateX(-32%);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|||||||
233
src/components/PlanDetailsTable.astro
Normal file
233
src/components/PlanDetailsTable.astro
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<table border="1" cellpadding="8" cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="first-col">Básico</th>
|
||||||
|
<th>Intermedio</th>
|
||||||
|
<th>Avanzado</th>
|
||||||
|
<th class="last-col">Observación</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="subtitle">Módulo Administrativo</td>
|
||||||
|
<td class="subtitle">Módulo Administrativo</td>
|
||||||
|
<td class="subtitle">Módulo Administrativo</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Roles y permisos</td>
|
||||||
|
<td>✅ Roles y permisos</td>
|
||||||
|
<td>✅ Roles y permisos</td>
|
||||||
|
<td>Control de accesos y permisos por usuario</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Clientes</td>
|
||||||
|
<td>✅ Clientes</td>
|
||||||
|
<td>✅ Clientes</td>
|
||||||
|
<td>Registro de clientes con datos de contacto</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Proveedores</td>
|
||||||
|
<td>✅ Proveedores</td>
|
||||||
|
<td>✅ Proveedores</td>
|
||||||
|
<td>Gestión de proveedores y datos asociados</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Productos / Servicios</td>
|
||||||
|
<td>✅ Productos / Servicios</td>
|
||||||
|
<td>✅ Productos / Servicios</td>
|
||||||
|
<td>Gestión de productos y servicios con precios y categorías</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Contabilidad</td>
|
||||||
|
<td>✅ Contabilidad</td>
|
||||||
|
<td>✅ Contabilidad</td>
|
||||||
|
<td>Registro contable, ingresos, gastos y utilidades</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Informes contables</td>
|
||||||
|
<td>✅ Informes contables</td>
|
||||||
|
<td>✅ Informes contables</td>
|
||||||
|
<td>Reportes financieros y contables</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Ventas</td>
|
||||||
|
<td>✅ Ventas</td>
|
||||||
|
<td>✅ Ventas</td>
|
||||||
|
<td>Registro y control de ventas</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Informes de ventas</td>
|
||||||
|
<td>✅ Informes de ventas</td>
|
||||||
|
<td>✅ Informes de ventas</td>
|
||||||
|
<td>Reportes por cliente, producto y medio de pago</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Inventarios</td>
|
||||||
|
<td>✅ Inventarios</td>
|
||||||
|
<td>✅ Inventarios</td>
|
||||||
|
<td>Control de inventario por ubicación</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Informes de inventarios</td>
|
||||||
|
<td>✅ Informes de inventarios</td>
|
||||||
|
<td>✅ Informes de inventarios</td>
|
||||||
|
<td>Reportes de stock y movimientos</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Compras</td>
|
||||||
|
<td>✅ Compras</td>
|
||||||
|
<td>✅ Compras</td>
|
||||||
|
<td>Registro de compras y actualización de inventario</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Agenda</td>
|
||||||
|
<td>✅ Agenda</td>
|
||||||
|
<td>✅ Agenda</td>
|
||||||
|
<td>Gestión de agenda por profesional o sede</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>✅ Liquidación de profesionales</td>
|
||||||
|
<td>✅ Liquidación de profesionales</td>
|
||||||
|
<td>✅ Liquidación de profesionales</td>
|
||||||
|
<td>Pagos calculados por día, semana o mes</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td class="subtitle">WebApp</td>
|
||||||
|
<td class="subtitle">WebApp</td>
|
||||||
|
<td>Aplicación web para el equipo de trabajo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Acceso y cuenta</td>
|
||||||
|
<td>✅ Acceso y cuenta</td>
|
||||||
|
<td>Inicio de sesión seguro y recuperación de contraseña</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Gestión diaria de servicios</td>
|
||||||
|
<td>✅ Gestión diaria de servicios</td>
|
||||||
|
<td>Visualización y detalle de servicios agendados</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Control del servicio</td>
|
||||||
|
<td>✅ Control del servicio</td>
|
||||||
|
<td>Estados sincronizados en tiempo real</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Adiciones y observaciones</td>
|
||||||
|
<td>✅ Adiciones y observaciones</td>
|
||||||
|
<td>Registro de notas y servicios adicionales</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Evidencias</td>
|
||||||
|
<td>✅ Evidencias</td>
|
||||||
|
<td>Carga y gestión de evidencias desde la app</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Reportes</td>
|
||||||
|
<td>✅ Reportes</td>
|
||||||
|
<td>Reportes por fecha, estado y profesional</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Experiencia y navegación</td>
|
||||||
|
<td>✅ Experiencia y navegación</td>
|
||||||
|
<td>Interfaz intuitiva y personalizable</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td class="subtitle">Servicio al cliente y postventa</td>
|
||||||
|
<td>Comunicación y seguimiento automatizado</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Agendamiento por WhatsApp y redes sociales</td>
|
||||||
|
<td>Agentes de IA para agendamiento automático</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Confirmación de citas</td>
|
||||||
|
<td>Confirmaciones automáticas por WhatsApp y redes</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td class="empty-cell">❌</td>
|
||||||
|
<td>✅ Mensajes de salida</td>
|
||||||
|
<td>Mensajes automáticos por WhatsApp y correo</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>8 horas de capacitación</td>
|
||||||
|
<td>12 horas de capacitación</td>
|
||||||
|
<td>16 horas de capacitación</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td colspan="4" style="text-align: center;"
|
||||||
|
>Soporte para todos los planes de lunes a viernes de 8am a 6pm y
|
||||||
|
sábados de 8am a 4pm</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border: var(--detailstable-primaryborder);
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: var(--detailstable-header-primarybgcolor);
|
||||||
|
color: var(--detailstable-header-txtcolor);
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 16px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
color: var(--detailstable-primarytxtcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--main-pink-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-cell {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--light-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-col {
|
||||||
|
border-top-left-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-col {
|
||||||
|
border-top-right-radius: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
149
src/components/PricingCard.astro
Normal file
149
src/components/PricingCard.astro
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
---
|
||||||
|
export interface PricingCardProps {
|
||||||
|
planType: string;
|
||||||
|
price: string;
|
||||||
|
description: string;
|
||||||
|
featuresTitle: string;
|
||||||
|
featuresDescription: string;
|
||||||
|
buttonText: string;
|
||||||
|
isBestPlan?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
planType,
|
||||||
|
price,
|
||||||
|
description,
|
||||||
|
featuresTitle,
|
||||||
|
featuresDescription,
|
||||||
|
buttonText,
|
||||||
|
isBestPlan,
|
||||||
|
} = Astro.props as PricingCardProps;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="pricing-card" data-best-plan={isBestPlan}>
|
||||||
|
<div class="pricing-card-header">
|
||||||
|
<p class="plan-type">{`Plan ${planType}`}</p>
|
||||||
|
|
||||||
|
<div class="price-and-description">
|
||||||
|
<h4 class="price">{price}</h4>
|
||||||
|
|
||||||
|
<h6 class="description">{description}</h6>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="features">
|
||||||
|
<p class="features-title">¿Qué te incluimos?</p>
|
||||||
|
|
||||||
|
<div class="features-list">
|
||||||
|
<p class="features-subtitle">
|
||||||
|
<strong>{featuresTitle}</strong>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="features-description">
|
||||||
|
{featuresDescription}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="button call-to-action-button">{buttonText}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.pricing-card[data-best-plan="true"] {
|
||||||
|
border: 4px solid var(--primarybutton-bgcolor);
|
||||||
|
height: 750px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card {
|
||||||
|
flex: 1;
|
||||||
|
height: 700px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
border-radius: var(--space-lg-24px);
|
||||||
|
background-color: var(--pricingcard-secundarybgcolor);
|
||||||
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
padding: var(--space-3xl-64px) var(--space-xl-32px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-card-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xl-32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-type {
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: var(--pricingcard-plantype-bgcolor);
|
||||||
|
color: var(--pricingcard-plantype-txtcolor);
|
||||||
|
padding: var(--space-sm-8px) var(--space-md-16px);
|
||||||
|
border-radius: var(--space-md-16px);
|
||||||
|
width: fit-content;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-and-description {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
& .price {
|
||||||
|
color: var(--pricingcard-primarytextcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .description {
|
||||||
|
color: var(--pricingcard-primarytextcolor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-top: 1px solid var(--main-pink-500);
|
||||||
|
border-bottom: 1px solid var(--main-pink-500);
|
||||||
|
padding: var(--padding-lg-24px) 0;
|
||||||
|
gap: var(--space-xl-32px);
|
||||||
|
|
||||||
|
& .features-title {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--main-pink-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .features-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm-8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .features-subtitle {
|
||||||
|
color: var(--pricingcard-primarytextcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .features-description {
|
||||||
|
color: var(--pricingcard-primarytextcolor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-to-action-button {
|
||||||
|
height: 42px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background-color: var(--primarybutton-bgcolor);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--space-sm-8px);
|
||||||
|
color: var(--primarybutton-txtcolor);
|
||||||
|
font-family: var(--font-family-primary);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: var(--font-desktop-h6);
|
||||||
|
line-height: var(--line-height-desktop-h6);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -123,7 +123,7 @@ import "./footer.css";
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div class="divider"></div>
|
<div class="footer-divider"></div>
|
||||||
|
|
||||||
<p>© 2026 Naliia. Todos los derechos reservados.</p>
|
<p>© 2026 Naliia. Todos los derechos reservados.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
gap: var(--space-lg-24px);
|
gap: var(--space-lg-24px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.footer-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: rgba(68, 68, 68, 0.2);
|
background-color: rgba(68, 68, 68, 0.2);
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ import "../styles/index.css";
|
|||||||
<div class="title-and-phrase">
|
<div class="title-and-phrase">
|
||||||
<h4>¿Qué ofrecemos?</h4>
|
<h4>¿Qué ofrecemos?</h4>
|
||||||
|
|
||||||
<p>
|
<p class="sections-subtitle">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||||
Sint, saepe quisquam deleniti mollitia tempore, laborum
|
Sint, saepe quisquam deleniti mollitia tempore, laborum
|
||||||
neque commodi ipsam nobis placeat.
|
neque commodi ipsam nobis placeat.
|
||||||
@@ -80,10 +80,10 @@ import "../styles/index.css";
|
|||||||
<div class="title-and-phrase">
|
<div class="title-and-phrase">
|
||||||
<h4>Elige tu plan</h4>
|
<h4>Elige tu plan</h4>
|
||||||
|
|
||||||
<p>
|
<p class="sections-subtitle">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
Nuestros planes están diseñados para adaptarse a las
|
||||||
Nobis labore consequatur reiciendis ullam veritatis
|
necesidades de tu negocio, ofreciendo flexibilidad y
|
||||||
inventore. Molestiae minima ab ut fugiat.
|
escalabilidad a medida que creces.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -259,6 +259,14 @@ import "../styles/index.css";
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p class="important-information">
|
||||||
|
Todos los planes incluyen soporte de lunes a viernes de 8am a
|
||||||
|
6pm y sábados de 8am a 4pm. Además, cada plan cuenta con una
|
||||||
|
cantidad de horas de capacitación, de la siguiente manera: Plan
|
||||||
|
Básico: 8 horas, Plan Intermedio: 12 horas, Plan Avanzado: 16
|
||||||
|
horas.
|
||||||
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -1,12 +1,70 @@
|
|||||||
---
|
---
|
||||||
// imports
|
// imports
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import InitialSection from "../components/InitialSection.astro";
|
||||||
|
import PricingCard from "../components/PricingCard.astro";
|
||||||
|
import PlanDetailsTable from "../components/PlanDetailsTable.astro";
|
||||||
|
import "../styles/pricingPage.css";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout pageTitle="Precios y membresías">
|
<Layout pageTitle="Precios y membresías">
|
||||||
<h1>Precios y membresías</h1>
|
<section class="pricing-page">
|
||||||
<p>
|
<InitialSection
|
||||||
Aquí encontrarás información sobre los precios y las opciones de
|
imgSrc="/src/assets/imgs/phone_with-stats.svg"
|
||||||
membresía disponibles.
|
imgAlt="Fotografia de un dispositivo móvil flotante con graficas y estadísticas en la pantalla y con un borde amarillo brillante"
|
||||||
</p>
|
imgWidth={520}
|
||||||
|
customXPosition="-52%"
|
||||||
|
logoSrc="/src/assets/imgs/logo-naliia.svg"
|
||||||
|
logoAlt="Logo de Naliia"
|
||||||
|
mainTitle="Elige tu plan, impulsa tu negocio"
|
||||||
|
subtitle="El siguiente nivel de tu negocio está a un clic. Elige, empieza y deja que los resultados hablen."
|
||||||
|
autoHeight={true}
|
||||||
|
>
|
||||||
|
<div slot="extraContent">
|
||||||
|
<div class="pricingcards">
|
||||||
|
<PricingCard
|
||||||
|
planType="Básico"
|
||||||
|
price="$100.000 COP"
|
||||||
|
description="¡Administra tu negocio desde el primer día!"
|
||||||
|
featuresTitle="Módulo administrativo"
|
||||||
|
featuresDescription="Centraliza la operación de tu negocio con herramientas administrativas, comerciales y contables que te permiten gestionar clientes, ventas, inventarios, agenda y reportes desde un solo sistema."
|
||||||
|
buttonText="Elegir Básico"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PricingCard
|
||||||
|
planType="Avanzado"
|
||||||
|
price="$500.000 COP"
|
||||||
|
description="El mejor plan todo en uno para el control total de tu negocio."
|
||||||
|
featuresTitle="Módulo administrativo + web app + Inteligencia artificial"
|
||||||
|
featuresDescription="Incluye todo lo del Plan Básico, la app web del Plan Intermedio y agentes de inteligencia artificial que automatizan el agendamiento de citas, confirmaciones y mensajes por WhatsApp y otros canales, mejorando la atención al cliente y la postventa."
|
||||||
|
buttonText="Elegir Avanzado"
|
||||||
|
isBestPlan={true}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PricingCard
|
||||||
|
planType="Intermedio"
|
||||||
|
price="$300.000 COP"
|
||||||
|
description="Más control y colaboración con una web app para tu equipo de trabajo."
|
||||||
|
featuresTitle="Módulo administrativo + web app"
|
||||||
|
featuresDescription="Incluye todo lo del Plan Básico, más una aplicación web que permite al equipo acceder a su cuenta, gestionar servicios diarios, registrar avances, observaciones y evidencias, y consultar reportes en tiempo real."
|
||||||
|
buttonText="Elegir Intermedio"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</InitialSection>
|
||||||
|
|
||||||
|
<section class="sections">
|
||||||
|
<div class="title-and-phrase">
|
||||||
|
<h4>Detalles de nuestros planes</h4>
|
||||||
|
|
||||||
|
<p class="sections-subtitle">
|
||||||
|
Todos los detalles de lo que incluye cada uno de nuestros
|
||||||
|
planes para que puedas elegir el que mejor se adapte a tus
|
||||||
|
necesidades.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PlanDetailsTable />
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -141,7 +141,10 @@
|
|||||||
--navbar-n-naliia-start: var(--main-pink-500);
|
--navbar-n-naliia-start: var(--main-pink-500);
|
||||||
--navbar-n-naliia-end: var(--main-yellow-500);
|
--navbar-n-naliia-end: var(--main-yellow-500);
|
||||||
--main-border: 1px solid rgba(68, 68, 68, 0.2);
|
--main-border: 1px solid rgba(68, 68, 68, 0.2);
|
||||||
|
--primarybutton-bgcolor: var(--main-pink-500);
|
||||||
|
--primarybutton-txtcolor: var(--base-white);
|
||||||
--pricingcard-bgcolor: var(--dark-gray);
|
--pricingcard-bgcolor: var(--dark-gray);
|
||||||
|
--pricingcard-secundarybgcolor: var(--main-mistyRose-500);
|
||||||
--pricingcard-section-bgcolor: var(--dark-gray);
|
--pricingcard-section-bgcolor: var(--dark-gray);
|
||||||
--pricingcard-sec-car-bgcolor: var(--light-gray);
|
--pricingcard-sec-car-bgcolor: var(--light-gray);
|
||||||
--pricingcard-plantype-bgcolor: var(--main-pink-500);
|
--pricingcard-plantype-bgcolor: var(--main-pink-500);
|
||||||
@@ -149,6 +152,11 @@
|
|||||||
--pricingcard-value-txtcolor: var(--base-white);
|
--pricingcard-value-txtcolor: var(--base-white);
|
||||||
--pricingcard-features-subtitlecolor: var(--main-pink-500);
|
--pricingcard-features-subtitlecolor: var(--main-pink-500);
|
||||||
--pricingcard-features-txtcolor: var(--base-white);
|
--pricingcard-features-txtcolor: var(--base-white);
|
||||||
|
--pricingcard-primarytextcolor: var(--light-gray);
|
||||||
|
--detailstable-header-primarybgcolor: var(--dark-gray);
|
||||||
|
--detailstable-header-txtcolor: var(--base-white);
|
||||||
|
--detailstable-primarytxtcolor: var(--light-gray);
|
||||||
|
--detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);
|
||||||
|
|
||||||
/* spacing, padding, margin */
|
/* spacing, padding, margin */
|
||||||
--space-none-0: var(--space-none);
|
--space-none-0: var(--space-none);
|
||||||
|
|||||||
@@ -13,6 +13,12 @@
|
|||||||
padding: 0px 350px;
|
padding: 0px 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sections-subtitle {
|
||||||
|
font-size: var(--font-desktop-base);
|
||||||
|
line-height: var(--line-height-desktop-base);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/* ----- Offer section styles ----- */
|
/* ----- Offer section styles ----- */
|
||||||
.offer-section {
|
.offer-section {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@@ -291,3 +297,16 @@
|
|||||||
color: var(--pricingcard-value-txtcolor);
|
color: var(--pricingcard-value-txtcolor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.important-information {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: var(--space-md-16px) var(--space-xl-32px);
|
||||||
|
|
||||||
|
border: 2px solid red;
|
||||||
|
border-radius: var(--space-md-16px);
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|||||||
52
src/styles/pricingPage.css
Normal file
52
src/styles/pricingPage.css
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
.pricing-page {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: hidden;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 140px;
|
||||||
|
background-color: transparent;
|
||||||
|
margin-bottom: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 48px;
|
||||||
|
padding: 0px 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections-subtitle {
|
||||||
|
font-size: var(--font-desktop-base);
|
||||||
|
line-height: var(--line-height-desktop-base);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-and-phrase {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm-8px);
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricingcards {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
gap: var(--space-lg-24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans-details-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-details {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-md-16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-title {
|
||||||
|
border: 1px solid black;
|
||||||
|
text-align: center;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user