feat: redesign pricing section and improve theming system
This commit is contained in:
@@ -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",
|
||||
];
|
||||
---
|
||||
|
||||
<Layout pageTitle="Home page">
|
||||
@@ -88,7 +74,9 @@ const basicPlanFeatures = [
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pricing pricing-container">
|
||||
<!-- ----- Pricing section ----- -->
|
||||
|
||||
<section class="pricing-container">
|
||||
<div class="title-and-phrase">
|
||||
<h4>Elige tu plan</h4>
|
||||
|
||||
@@ -100,20 +88,91 @@ const basicPlanFeatures = [
|
||||
</div>
|
||||
|
||||
<div class="pricing-cards-container">
|
||||
<div class="pricing-card best-plan-card">
|
||||
<div class="best-plan-card">
|
||||
<div class="price-container">
|
||||
<p class="plan-type">Plan Avanzado</p>
|
||||
|
||||
<div class="price-and-description">
|
||||
<h4 class="price-title">$500.000 COP</h4>
|
||||
<h6 class="price-subtitle">
|
||||
La mejor opción para tu negocio!
|
||||
</h6>
|
||||
</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 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 class="ai-features">
|
||||
<p>
|
||||
<strong
|
||||
>Servicio al cliente y postventa:</strong
|
||||
>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Agendamiento y confirmación por
|
||||
WhatsApp/redes, con notificaciones de salida
|
||||
vía WhatsApp o email.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="basic-mid-plans-container">
|
||||
<div class="mid-plan pricing-card">
|
||||
<div class="price-container">
|
||||
<p class="plan-type">Plan Avanzado</p>
|
||||
<p class="plan-type">Plan Intermedio</p>
|
||||
|
||||
<div class="price-and-description">
|
||||
<h4 class="price-title">$500.000 COP</h4>
|
||||
<h6 class="price-subtitle">La mejor opción para tu negocio!</h6>
|
||||
<h5 class="price-title">$300.000 COP</h5>
|
||||
<p class="price-subtitle">
|
||||
Gestiona tu negocio con eficiencia y control
|
||||
total!
|
||||
</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
|
||||
>
|
||||
@@ -127,133 +186,77 @@ const basicPlanFeatures = [
|
||||
|
||||
<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>
|
||||
<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 class="ai-features">
|
||||
<p><strong>Servicio al cliente y postventa:</strong></p>
|
||||
|
||||
<p>Agendamiento y confirmación por WhatsApp/redes, con notificaciones de salida vía WhatsApp o email.</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>
|
||||
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-card-content">
|
||||
<p class="plan-type">Plan Básico</p>
|
||||
<div class="basic-plan pricing-card">
|
||||
<div class="price-container">
|
||||
<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 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">
|
||||
<h6>Incluye:</h6>
|
||||
<p class="features-subtitle">Tu plan incluye:</p>
|
||||
|
||||
{
|
||||
basicPlanFeatures.map((feature) => (
|
||||
<p>{feature}</p>
|
||||
<div class="horizontal-divider"></div>
|
||||
))
|
||||
}
|
||||
<div class="features-list">
|
||||
<div class="basic-features">
|
||||
<p>
|
||||
<strong>Características básicas:</strong
|
||||
>
|
||||
</p>
|
||||
|
||||
<!-- <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>
|
||||
<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> -->
|
||||
<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 class="button-and-link-container">
|
||||
<button class="button select-plan-button"
|
||||
>Contáctanos</button
|
||||
>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="price-and-description">
|
||||
<h4>$300.000 COP</h4>
|
||||
<p>
|
||||
Gestión completa del negocio con una <strong
|
||||
>app web</strong
|
||||
> para que tu equipo pueda ver, organizar y para que
|
||||
tu equipo pueda ver, organizar y monitorear sus servicios
|
||||
agendados.
|
||||
</p>
|
||||
</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">
|
||||
<button class="button select-plan-button"
|
||||
>Contáctanos</button
|
||||
>
|
||||
|
||||
<a href="/pricing" class="more-details-link"
|
||||
>Conoce a detalle todos los planes</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user