From 934d6e5fdae1cb3bd7eeebf7962d90bcaea38362 Mon Sep 17 00:00:00 2001 From: Juan Diego Moreno Upegui Date: Thu, 5 Feb 2026 16:10:26 -0500 Subject: [PATCH] feat: redesign pricing section and improve theming system --- src/pages/index.astro | 263 +++++++++++++++++++++--------------------- src/styles/global.css | 1 + src/styles/index.css | 104 ++++++++++++++++- 3 files changed, 233 insertions(+), 135 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 31c1af5..ce37764 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,20 +2,6 @@ import Layout from "../layouts/Layout.astro"; import InitialSection from "../components/InitialSection.astro"; import "../styles/index.css"; - -const basicPlanFeatures = [ - "Roles y permisos", - "Administración de Clientes", - "Administración de Proveedores", - "Productos/Servicios", - "Contabilidad", - "Informes contables", - "Ventas", - "Informes de ventas", - "Compras", - "Agenda", - "Liquidación de profesionales", -]; --- @@ -88,7 +74,9 @@ const basicPlanFeatures = [ -
+ + +

Elige tu plan

@@ -100,20 +88,91 @@ const basicPlanFeatures = [
-
+
+
+

Plan Avanzado

+ +
+

$500.000 COP

+
+ La mejor opción para tu negocio! +
+
+ +
+ + + O conoce a detalle todos los planes +
+
+ +
+ +
+

Tu plan incluye:

+ +
+
+

Características básicas:

+ +

+ Control completo de usuarios, clientes, + proveedores, inventario, contabilidad y + reportes financieros. Módulos de ventas, + compras y agenda de profesionales. +

+
+ +
+

Aplicación web:

+ +

+ Acceso personalizado para gestionar + servicios diarios: control en tiempo real, + registro de evidencias, reportes y + comunicación fluida con central. +

+
+ +
+

+ Servicio al cliente y postventa: +

+ +

+ Agendamiento y confirmación por + WhatsApp/redes, con notificaciones de salida + vía WhatsApp o email. +

+
+
+
+
+ +
+
-

Plan Avanzado

+

Plan Intermedio

-

$500.000 COP

-
La mejor opción para tu negocio!
+
$300.000 COP
+

+ Gestiona tu negocio con eficiencia y control + total! +

- + O conoce a detalle todos los planes @@ -127,133 +186,77 @@ const basicPlanFeatures = [
-

Características básicas:

- -

Control completo de usuarios, clientes, proveedores, inventario, contabilidad y reportes financieros. Módulos de ventas, compras y agenda de profesionales.

+

+ Características básicas: +

+ +

+ Control completo de usuarios, clientes, + proveedores, inventario, contabilidad y + reportes financieros. Módulos de ventas, + compras y agenda de profesionales. +

Aplicación web:

- -

Acceso personalizado para gestionar servicios diarios: control en tiempo real, registro de evidencias, reportes y comunicación fluida con central.

-
-
-

Servicio al cliente y postventa:

- -

Agendamiento y confirmación por WhatsApp/redes, con notificaciones de salida vía WhatsApp o email.

+

+ Acceso personalizado para gestionar + servicios diarios: control en tiempo + real, registro de evidencias, reportes y + comunicación fluida con central. +

-
+
-
-
-

Plan Básico

+
+
+

Plan Básico

-
-

$100.000 COP

-

Esencial para administrar tu negocio

+
+
$100.000 COP
+

+ Gestión esencial para tu negocio! +

+
+ +
+ + + O conoce a detalle todos los planes +
+
+
-
Incluye:
+

Tu plan incluye:

- { - basicPlanFeatures.map((feature) => ( -

{feature}

-
- )) - } +
+
+

+ Características básicas: +

- +

+ Control completo de usuarios, clientes, + proveedores, inventario, contabilidad y + reportes financieros. Módulos de ventas, + compras y agenda de profesionales. +

+
+
- -
- - - Conoce a detalle todos los planes -
-
- -
-
-

Plan Intermedio

- -
-

$300.000 COP

-

- Gestión completa del negocio con una app web para que tu equipo pueda ver, organizar y para que - tu equipo pueda ver, organizar y monitorear sus servicios - agendados. -

-
- -
-
Características
-

- Incluye todos los beneficios del Plan Básico e - incluye además una Aplicación web para la gestión del negocio. -

- -
- Caracteristicas de la app web -
    -
  • Informes contables
    • -
  • Ventas
    • -
  • Informes de ventas
    • -
  • Compras
    • -
  • Agenda
    • -
  • Liquidación de profesionales
    • -
-
-
-
- -
- - - Conoce a detalle todos los planes -
diff --git a/src/styles/global.css b/src/styles/global.css index 8b53d26..991fd23 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -143,6 +143,7 @@ --main-border: 1px solid rgba(68, 68, 68, 0.2); --pricingcard-bgcolor: var(--dark-gray); --pricingcard-section-bgcolor: var(--dark-gray); + --pricingcard-sec-car-bgcolor: var(--light-gray); --pricingcard-plantype-bgcolor: var(--main-pink-500); --pricingcard-plantype-txtcolor: var(--base-white); --pricingcard-value-txtcolor: var(--base-white); diff --git a/src/styles/index.css b/src/styles/index.css index 89c03c6..bf6cece 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -54,7 +54,7 @@ } /* ----- Pricing section styles ----- */ -.pricing { +.pricing-container { margin-bottom: 140px; background-color: transparent; display: flex; @@ -122,10 +122,6 @@ p { color: var(--pricingcard-value-txtcolor); } - - & .price-title { - text-decoration: underline; - } } .button-and-link-container { @@ -197,3 +193,101 @@ color: var(--pricingcard-features-txtcolor); } } + +.basic-mid-plans-container { + display: flex; + width: 100%; + gap: var(--space-lg-24px); + box-sizing: border-box; + + & .pricing-card { + height: 300px; + display: flex; + gap: var(--space-lg-24px); + + padding: var(--space-xl-32px); + background-color: var(--pricingcard-sec-car-bgcolor); + } +} + +.mid-plan { + width: 60%; + border-bottom-left-radius: var(--space-2xl-48px); + + & .price-container { + height: 100%; + width: 50%; + + display: flex; + flex-direction: column; + justify-content: space-between; + } + + & .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; + + & h5, + h6, + p { + color: var(--pricingcard-value-txtcolor); + } + } + + & a { + color: var(--pricingcard-value-txtcolor); + } +} + +.basic-plan { + width: 40%; + border-bottom-right-radius: var(--space-2xl-48px); + + & .price-container { + height: 100%; + width: 50%; + + display: flex; + flex-direction: column; + justify-content: space-between; + } + + & .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; + + & h5, + h6, + p { + color: var(--pricingcard-value-txtcolor); + } + } + + & a { + color: var(--pricingcard-value-txtcolor); + } +}