diff --git a/src/assets/imgs/mujer-con-tablet.webp b/src/assets/imgs/mujer-con-tablet.webp new file mode 100644 index 0000000..0641993 Binary files /dev/null and b/src/assets/imgs/mujer-con-tablet.webp differ diff --git a/src/assets/imgs/phone_with-stats.svg b/src/assets/imgs/phone_with-stats.svg new file mode 100644 index 0000000..a699f36 --- /dev/null +++ b/src/assets/imgs/phone_with-stats.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/InitialSection.astro b/src/components/InitialSection.astro index 579b887..d339b08 100644 --- a/src/components/InitialSection.astro +++ b/src/components/InitialSection.astro @@ -2,19 +2,40 @@ export interface SectionProps { imgSrc: string; imgAlt: string; + imgWidth?: number; + imgHeight?: number; + customXPosition?: string; logoSrc: string; logoAlt: string; mainTitle: string; subtitle: string; buttonText?: string; + autoHeight?: boolean; } -const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } = - Astro.props as SectionProps; +const { + imgSrc, + imgAlt, + imgWidth, + imgHeight, + logoSrc, + logoAlt, + mainTitle, + subtitle, + buttonText, + customXPosition, + autoHeight = false, +} = Astro.props as SectionProps; --- -
- {imgAlt} +
+ {imgAlt}
@@ -41,7 +62,6 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } = ) }
-
@@ -57,6 +77,12 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } = padding: 80px 300px 0px 300px; } + .section-1[data-auto-height="true"] { + height: auto; + min-height: 100vh; + padding-bottom: 80px; + } + .main-img { position: absolute; top: 20px; @@ -65,7 +91,7 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } = width: 680px; height: auto; - transform: translateX(-25%); + transform: translateX(-32%); z-index: -1; pointer-events: none; } diff --git a/src/components/PlanDetailsTable.astro b/src/components/PlanDetailsTable.astro new file mode 100644 index 0000000..d1f19ab --- /dev/null +++ b/src/components/PlanDetailsTable.astro @@ -0,0 +1,233 @@ +--- + +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BásicoIntermedioAvanzadoObservación
Módulo AdministrativoMódulo AdministrativoMódulo Administrativo
✅ Roles y permisos✅ Roles y permisos✅ Roles y permisosControl de accesos y permisos por usuario
✅ Clientes✅ Clientes✅ ClientesRegistro de clientes con datos de contacto
✅ Proveedores✅ Proveedores✅ ProveedoresGestión de proveedores y datos asociados
✅ Productos / Servicios✅ Productos / Servicios✅ Productos / ServiciosGestión de productos y servicios con precios y categorías
✅ Contabilidad✅ Contabilidad✅ ContabilidadRegistro contable, ingresos, gastos y utilidades
✅ Informes contables✅ Informes contables✅ Informes contablesReportes financieros y contables
✅ Ventas✅ Ventas✅ VentasRegistro y control de ventas
✅ Informes de ventas✅ Informes de ventas✅ Informes de ventasReportes por cliente, producto y medio de pago
✅ Inventarios✅ Inventarios✅ InventariosControl de inventario por ubicación
✅ Informes de inventarios✅ Informes de inventarios✅ Informes de inventariosReportes de stock y movimientos
✅ Compras✅ Compras✅ ComprasRegistro de compras y actualización de inventario
✅ Agenda✅ Agenda✅ AgendaGestión de agenda por profesional o sede
✅ Liquidación de profesionales✅ Liquidación de profesionales✅ Liquidación de profesionalesPagos calculados por día, semana o mes
❌WebAppWebAppAplicación web para el equipo de trabajo
❌✅ Acceso y cuenta✅ Acceso y cuentaInicio de sesión seguro y recuperación de contraseña
❌✅ Gestión diaria de servicios✅ Gestión diaria de serviciosVisualización y detalle de servicios agendados
❌✅ Control del servicio✅ Control del servicioEstados sincronizados en tiempo real
❌✅ Adiciones y observaciones✅ Adiciones y observacionesRegistro de notas y servicios adicionales
❌✅ Evidencias✅ EvidenciasCarga y gestión de evidencias desde la app
❌✅ Reportes✅ ReportesReportes por fecha, estado y profesional
❌✅ Experiencia y navegación✅ Experiencia y navegaciónInterfaz intuitiva y personalizable
❌❌Servicio al cliente y postventaComunicación y seguimiento automatizado
❌❌✅ Agendamiento por WhatsApp y redes socialesAgentes de IA para agendamiento automático
❌❌✅ Confirmación de citasConfirmaciones automáticas por WhatsApp y redes
❌❌✅ Mensajes de salidaMensajes automáticos por WhatsApp y correo
8 horas de capacitación12 horas de capacitación16 horas de capacitación
Soporte para todos los planes de lunes a viernes de 8am a 6pm y + sábados de 8am a 4pm
+ + diff --git a/src/components/PricingCard.astro b/src/components/PricingCard.astro new file mode 100644 index 0000000..6b1a718 --- /dev/null +++ b/src/components/PricingCard.astro @@ -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; +--- + +
+
+

{`Plan ${planType}`}

+ +
+

{price}

+ +
{description}
+
+ +
+

¿Qué te incluimos?

+ +
+

+ {featuresTitle} +

+ +

+ {featuresDescription} +

+
+
+
+ + +
+ + diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro index dfa471c..442e520 100644 --- a/src/components/footer/Footer.astro +++ b/src/components/footer/Footer.astro @@ -123,7 +123,7 @@ import "./footer.css"; -
+

© 2026 Naliia. Todos los derechos reservados.

diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css index 237249e..2cf4028 100644 --- a/src/components/footer/footer.css +++ b/src/components/footer/footer.css @@ -15,7 +15,7 @@ gap: var(--space-lg-24px); } -.divider { +.footer-divider { width: 1px; height: 40px; background-color: rgba(68, 68, 68, 0.2); diff --git a/src/pages/index.astro b/src/pages/index.astro index ce37764..46b6346 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -20,7 +20,7 @@ import "../styles/index.css";

¿Qué ofrecemos?

-

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, saepe quisquam deleniti mollitia tempore, laborum neque commodi ipsam nobis placeat. @@ -80,10 +80,10 @@ import "../styles/index.css";

Elige tu plan

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Nobis labore consequatur reiciendis ullam veritatis - inventore. Molestiae minima ab ut fugiat. +

+ Nuestros planes están diseñados para adaptarse a las + necesidades de tu negocio, ofreciendo flexibilidad y + escalabilidad a medida que creces.

@@ -259,6 +259,14 @@ import "../styles/index.css";
+ +

+ 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. +

diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro index a6b57d9..1c6b5e4 100644 --- a/src/pages/pricing.astro +++ b/src/pages/pricing.astro @@ -1,12 +1,70 @@ --- // imports 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"; --- -

Precios y membresías

-

- Aquí encontrarás información sobre los precios y las opciones de - membresía disponibles. -

+
+ +
+
+ + + + + +
+
+ + +
+
+

Detalles de nuestros planes

+ +

+ Todos los detalles de lo que incluye cada uno de nuestros + planes para que puedas elegir el que mejor se adapte a tus + necesidades. +

+
+ + +
+
diff --git a/src/styles/global.css b/src/styles/global.css index 991fd23..ad2b3ab 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -141,7 +141,10 @@ --navbar-n-naliia-start: var(--main-pink-500); --navbar-n-naliia-end: var(--main-yellow-500); --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-secundarybgcolor: var(--main-mistyRose-500); --pricingcard-section-bgcolor: var(--dark-gray); --pricingcard-sec-car-bgcolor: var(--light-gray); --pricingcard-plantype-bgcolor: var(--main-pink-500); @@ -149,6 +152,11 @@ --pricingcard-value-txtcolor: var(--base-white); --pricingcard-features-subtitlecolor: var(--main-pink-500); --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 */ --space-none-0: var(--space-none); diff --git a/src/styles/index.css b/src/styles/index.css index bf6cece..1ac954c 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -13,6 +13,12 @@ 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 { background-color: transparent; @@ -291,3 +297,16 @@ 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; +} diff --git a/src/styles/pricingPage.css b/src/styles/pricingPage.css new file mode 100644 index 0000000..5a83b8b --- /dev/null +++ b/src/styles/pricingPage.css @@ -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; +}