OneTeam/NaliiaWebsite
16
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign pricing section and improve theming system

Browse Source
This commit is contained in:
Juan Diego Moreno Upegui
2026-02-05 16:10:26 -05:00
parent 83b0461f3b
commit 934d6e5fda
3 changed files with 233 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/pages/index.astro
View File

@@ -2,20 +2,6 @@
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import InitialSection from "../components/InitialSection.astro"; import InitialSection from "../components/InitialSection.astro";
import "../styles/index.css"; 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",
];
--- ---
<Layout pageTitle="Home page"> <Layout pageTitle="Home page">
@@ -88,7 +74,9 @@ const basicPlanFeatures = [
</div> </div>
</section> </section>
<section class="pricing pricing-container"> <!-- ----- Pricing section ----- -->
<section class="pricing-container">
<div class="title-and-phrase"> <div class="title-and-phrase">
<h4>Elige tu plan</h4> <h4>Elige tu plan</h4>
@@ -100,13 +88,15 @@ const basicPlanFeatures = [
</div> </div>
<div class="pricing-cards-container"> <div class="pricing-cards-container">
<div class="pricing-card best-plan-card"> <div class="best-plan-card">
<div class="price-container"> <div class="price-container">
<p class="plan-type">Plan Avanzado</p> <p class="plan-type">Plan Avanzado</p>
<div class="price-and-description"> <div class="price-and-description">
<h4 class="price-title">$500.000 COP</h4> <h4 class="price-title">$500.000 COP</h4>
<h6 class="price-subtitle">La mejor opción para tu negocio!</h6> <h6 class="price-subtitle">
La mejor opción para tu negocio!
</h6>
</div> </div>
<div class="button-and-link-container"> <div class="button-and-link-container">
@@ -129,132 +119,145 @@ const basicPlanFeatures = [
<div class="basic-features"> <div class="basic-features">
<p><strong>Características básicas:</strong></p> <p><strong>Características básicas:</strong></p>
<p>Control completo de usuarios, clientes, proveedores, inventario, contabilidad y reportes financieros. Módulos de ventas, compras y agenda de profesionales.</p> <p>
Control completo de usuarios, clientes,
proveedores, inventario, contabilidad y
reportes financieros. Módulos de ventas,
compras y agenda de profesionales.
</p>
</div> </div>
<div class="webapp-features"> <div class="webapp-features">
<p><strong>Aplicación web:</strong></p> <p><strong>Aplicación web:</strong></p>
<p>Acceso personalizado para gestionar servicios diarios: control en tiempo real, registro de evidencias, reportes y comunicación fluida con central.</p> <p>
Acceso personalizado para gestionar
servicios diarios: control en tiempo real,
registro de evidencias, reportes y
comunicación fluida con central.
</p>
</div> </div>
<div class="ai-features"> <div class="ai-features">
<p><strong>Servicio al cliente y postventa:</strong></p> <p>
<strong
<p>Agendamiento y confirmación por WhatsApp/redes, con notificaciones de salida vía WhatsApp o email.</p> >Servicio al cliente y postventa:</strong
</div>
</div>
</div>
</div>
<div class="pricing-card">
<div class="pricing-card-content">
<p class="plan-type">Plan Básico</p>
<div class="price-and-description">
<h4>$100.000 COP</h4>
<p>Esencial para administrar tu negocio</p>
</div>
<div class="features-container">
<h6>Incluye:</h6>
{
basicPlanFeatures.map((feature) => (
<p>{feature}</p>
<div class="horizontal-divider"></div>
))
}
<!-- <ul>
<li>Roles y permisos</li>
<li>Administración de Clientes</li>
<li>Administración de Proveedores</li>
<li>Productos/Servicios</li>
<li>Contabilidad</li>
</ul>
<details class="more-features-details">
<summary class="more-details"
>Ver más características</summary
> >
<ul> </p>
<li>Informes contables</li>
<li>Ventas</li> <p>
<li>Informes de ventas</li> Agendamiento y confirmación por
<li>Compras</li> WhatsApp/redes, con notificaciones de salida
<li>Agenda</li> vía WhatsApp o email.
<li>Liquidación de profesionales</li> </p>
</ul> </div>
</details> --> </div>
</div> </div>
</div> </div>
<div class="button-and-link-container"> <div class="basic-mid-plans-container">
<button class="button select-plan-button" <div class="mid-plan pricing-card">
>Contáctanos</button <div class="price-container">
>
<a href="/pricing" class="more-details-link"
>Conoce a detalle todos los planes</a
>
</div>
</div>
<div class="pricing-card">
<div class="pricing-card-content">
<p class="plan-type">Plan Intermedio</p> <p class="plan-type">Plan Intermedio</p>
<div class="price-and-description"> <div class="price-and-description">
<h4>$300.000 COP</h4> <h5 class="price-title">$300.000 COP</h5>
<p> <p class="price-subtitle">
Gestión completa del negocio con una <strong Gestiona tu negocio con eficiencia y control
>app web</strong total!
> para que tu equipo pueda ver, organizar y para que
tu equipo pueda ver, organizar y monitorear sus servicios
agendados.
</p> </p>
</div> </div>
<div
class="features-container container-intermediate-plan"
>
<h6>Características</h6>
<p>
Incluye todos los beneficios del Plan Básico e
incluye además una <strong
>Aplicación web</strong
> para la gestión del negocio.
</p>
<details class="more-features-details">
<summary class="more-details"
><strong
>Caracteristicas de la app web</strong
></summary
>
<ul>
<li>Informes contables</li>
<li>Ventas</li>
<li>Informes de ventas</li>
<li>Compras</li>
<li>Agenda</li>
<li>Liquidación de profesionales</li>
</ul>
</details>
</div>
</div>
<div class="button-and-link-container"> <div class="button-and-link-container">
<button class="button select-plan-button" <button class="button select-plan-button"
>Contáctanos</button >Contáctanos</button
> >
<a href="/pricing" class="more-details-link" <a href="/pricing"
>Conoce a detalle todos los planes</a >O conoce a detalle todos los planes</a
> >
</div> </div>
</div> </div>
<div class="divider"></div>
<div class="features-container">
<p class="features-subtitle">Tu plan incluye:</p>
<div class="features-list">
<div class="basic-features">
<p>
<strong>Características básicas:</strong
>
</p>
<p>
Control completo de usuarios, clientes,
proveedores, inventario, contabilidad y
reportes financieros. Módulos de ventas,
compras y agenda de profesionales.
</p>
</div>
<div class="webapp-features">
<p><strong>Aplicación web:</strong></p>
<p>
Acceso personalizado para gestionar
servicios diarios: control en tiempo
real, registro de evidencias, reportes y
comunicación fluida con central.
</p>
</div>
</div>
</div>
</div>
<div class="basic-plan pricing-card">
<div class="price-container">
<p class="plan-type">Plan Básico</p>
<div class="price-and-description">
<h5 class="price-title">$100.000 COP</h5>
<p class="price-subtitle">
Gestión esencial para tu negocio!
</p>
</div>
<div class="button-and-link-container">
<button class="button select-plan-button"
>Contáctanos</button
>
<a href="/pricing"
>O conoce a detalle todos los planes</a
>
</div>
</div>
<div class="divider"></div>
<div class="features-container">
<p class="features-subtitle">Tu plan incluye:</p>
<div class="features-list">
<div class="basic-features">
<p>
<strong>Características básicas:</strong
>
</p>
<p>
Control completo de usuarios, clientes,
proveedores, inventario, contabilidad y
reportes financieros. Módulos de ventas,
compras y agenda de profesionales.
</p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</section> </section>
</section> </section>

1
src/styles/global.css
View File

@@ -143,6 +143,7 @@
--main-border: 1px solid rgba(68, 68, 68, 0.2); --main-border: 1px solid rgba(68, 68, 68, 0.2);
--pricingcard-bgcolor: var(--dark-gray); --pricingcard-bgcolor: var(--dark-gray);
--pricingcard-section-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-bgcolor: var(--main-pink-500);
--pricingcard-plantype-txtcolor: var(--base-white); --pricingcard-plantype-txtcolor: var(--base-white);
--pricingcard-value-txtcolor: var(--base-white); --pricingcard-value-txtcolor: var(--base-white);

104
src/styles/index.css
View File

@@ -54,7 +54,7 @@
} }
/* ----- Pricing section styles ----- */ /* ----- Pricing section styles ----- */
.pricing { .pricing-container {
margin-bottom: 140px; margin-bottom: 140px;
background-color: transparent; background-color: transparent;
display: flex; display: flex;
@@ -122,10 +122,6 @@
p { p {
color: var(--pricingcard-value-txtcolor); color: var(--pricingcard-value-txtcolor);
} }
& .price-title {
text-decoration: underline;
}
} }
.button-and-link-container { .button-and-link-container {
@@ -197,3 +193,101 @@
color: var(--pricingcard-features-txtcolor); 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);
}
}