Started adding information ton pricing cards in home page

This commit is contained in:
2026-02-02 17:37:30 -05:00
parent 438ffa3282
commit 64309e8813
2 changed files with 142 additions and 70 deletions

View File

@@ -87,90 +87,128 @@ import "../styles/index.css";
<div class="pricing-cards-container">
<div class="pricing-card">
<p class="plan-type">Tipo de plan</p>
<div class="pricing-card-content">
<p class="plan-type">Plan Básico</p>
<div class="price-and-description">
<h4>$100.000</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Repudiandae sapiente optio, quisquam ea
placeat architecto dicta, suscipit quasi
necessitatibus neque.
</p>
<div class="price-and-description">
<h4>$100.000 COP</h4>
<p>
Todo lo esencial para administrar tu negocio
desde un solo lugar, con control de clientes,
ventas y operaciones diarias.
</p>
</div>
<div class="features-container">
<h6>Este plan incluye:</h6>
<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>
</div>
</div>
<div class="features-container">
<h6>Características</h6>
<ul>
<li>Característica #1 del plan</li>
<li>Característica #2 del plan</li>
<li>Característica #3 del plan</li>
<li>Característica #4 del plan</li>
<li>Característica #5 del plan</li>
</ul>
</div>
<div class="button-and-link-container">
<button class="button select-plan-button"
>Contáctanos</button
>
<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 best-plan-card">
<p class="plan-type">Tipo de plan</p>
<div class="pricing-card-content">
<p class="plan-type">Plan Avanzado</p>
<div class="price-and-description">
<h4>$500.000</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Repudiandae sapiente optio, quisquam ea
placeat architecto dicta, suscipit quasi
necessitatibus neque.
</p>
<div class="price-and-description">
<h4>$500.000 COP</h4>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Repudiandae sapiente optio,
quisquam ea placeat architecto dicta, suscipit
quasi necessitatibus neque.
</p>
</div>
<div class="features-container">
<h6>Características</h6>
<ul>
<li>Característica #1 del plan</li>
<li>Característica #2 del plan</li>
<li>Característica #3 del plan</li>
<li>Característica #4 del plan</li>
<li>Característica #5 del plan</li>
</ul>
</div>
</div>
<div class="features-container">
<h6>Características</h6>
<ul>
<li>Característica #1 del plan</li>
<li>Característica #2 del plan</li>
<li>Característica #3 del plan</li>
<li>Característica #4 del plan</li>
<li>Característica #5 del plan</li>
</ul>
</div>
<div class="button-and-link-container">
<button class="button select-plan-button"
>Contáctanos</button
>
<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">
<p class="plan-type">Tipo de plan</p>
<div class="pricing-card-content">
<p class="plan-type">Plan Intermedio</p>
<div class="price-and-description">
<h4>$300.000</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Repudiandae sapiente optio, quisquam ea
placeat architecto dicta, suscipit quasi
necessitatibus neque.
</p>
<div class="price-and-description">
<h4>$300.000 COP</h4>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Repudiandae sapiente optio,
quisquam ea placeat architecto dicta, suscipit
quasi necessitatibus neque.
</p>
</div>
<div class="features-container">
<h6>Características</h6>
<ul>
<li>Característica #1 del plan</li>
<li>Característica #2 del plan</li>
<li>Característica #3 del plan</li>
<li>Característica #4 del plan</li>
<li>Característica #5 del plan</li>
</ul>
</div>
</div>
<div class="features-container">
<h6>Características</h6>
<ul>
<li>Característica #1 del plan</li>
<li>Característica #2 del plan</li>
<li>Característica #3 del plan</li>
<li>Característica #4 del plan</li>
<li>Característica #5 del plan</li>
</ul>
</div>
<div class="button-and-link-container">
<button class="button select-plan-button"
>Contáctanos</button
>
<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>