Started adding information ton pricing cards in home page
This commit is contained in:
@@ -87,90 +87,128 @@ import "../styles/index.css";
|
|||||||
|
|
||||||
<div class="pricing-cards-container">
|
<div class="pricing-cards-container">
|
||||||
<div class="pricing-card">
|
<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">
|
<div class="price-and-description">
|
||||||
<h4>$100.000</h4>
|
<h4>$100.000 COP</h4>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
Todo lo esencial para administrar tu negocio
|
||||||
elit. Repudiandae sapiente optio, quisquam ea
|
desde un solo lugar, con control de clientes,
|
||||||
placeat architecto dicta, suscipit quasi
|
ventas y operaciones diarias.
|
||||||
necessitatibus neque.
|
</p>
|
||||||
</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>
|
||||||
|
|
||||||
<div class="features-container">
|
<div class="button-and-link-container">
|
||||||
<h6>Características</h6>
|
<button class="button select-plan-button"
|
||||||
<ul>
|
>Contáctanos</button
|
||||||
<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>
|
|
||||||
|
|
||||||
<button class="button select-plan-button"
|
<a href="/pricing" class="more-details-link"
|
||||||
>Contáctanos</button
|
>Conoce a detalle todos los planes</a
|
||||||
>
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pricing-card best-plan-card">
|
<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">
|
<div class="price-and-description">
|
||||||
<h4>$500.000</h4>
|
<h4>$500.000 COP</h4>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
Lorem ipsum dolor sit amet, consectetur
|
||||||
elit. Repudiandae sapiente optio, quisquam ea
|
adipisicing elit. Repudiandae sapiente optio,
|
||||||
placeat architecto dicta, suscipit quasi
|
quisquam ea placeat architecto dicta, suscipit
|
||||||
necessitatibus neque.
|
quasi necessitatibus neque.
|
||||||
</p>
|
</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>
|
||||||
|
|
||||||
<div class="features-container">
|
<div class="button-and-link-container">
|
||||||
<h6>Características</h6>
|
<button class="button select-plan-button"
|
||||||
<ul>
|
>Contáctanos</button
|
||||||
<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>
|
|
||||||
|
|
||||||
<button class="button select-plan-button"
|
<a href="/pricing" class="more-details-link"
|
||||||
>Contáctanos</button
|
>Conoce a detalle todos los planes</a
|
||||||
>
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pricing-card">
|
<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">
|
<div class="price-and-description">
|
||||||
<h4>$300.000</h4>
|
<h4>$300.000 COP</h4>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
Lorem ipsum dolor sit amet, consectetur
|
||||||
elit. Repudiandae sapiente optio, quisquam ea
|
adipisicing elit. Repudiandae sapiente optio,
|
||||||
placeat architecto dicta, suscipit quasi
|
quisquam ea placeat architecto dicta, suscipit
|
||||||
necessitatibus neque.
|
quasi necessitatibus neque.
|
||||||
</p>
|
</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>
|
||||||
|
|
||||||
<div class="features-container">
|
<div class="button-and-link-container">
|
||||||
<h6>Características</h6>
|
<button class="button select-plan-button"
|
||||||
<ul>
|
>Contáctanos</button
|
||||||
<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>
|
|
||||||
|
|
||||||
<button class="button select-plan-button"
|
<a href="/pricing" class="more-details-link"
|
||||||
>Contáctanos</button
|
>Conoce a detalle todos los planes</a
|
||||||
>
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 220px;
|
gap: 140px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,16 +78,33 @@
|
|||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
gap: var(--space-2xl-48px);
|
gap: var(--space-2xl-48px);
|
||||||
|
|
||||||
height: 600px;
|
min-height: 650px;
|
||||||
|
width: 380px;
|
||||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
|
||||||
background-color: #363636;
|
background-color: #363636;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pricing-card-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2xl-48px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-details {
|
||||||
|
font-size: var(--font-desktop-base);
|
||||||
|
line-height: var(--line-height-desktop-base);
|
||||||
|
color: white;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
.best-plan-card {
|
.best-plan-card {
|
||||||
border: 4px solid #e54c75;
|
border: 4px solid #e54c75;
|
||||||
height: 620px;
|
height: 680px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-card .plan-type {
|
.pricing-card .plan-type {
|
||||||
@@ -119,9 +136,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-and-link-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-md-16px);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.select-plan-button {
|
.select-plan-button {
|
||||||
height: 42px;
|
height: 42px;
|
||||||
width: auto;
|
width: 100%;
|
||||||
padding: var(--space-sm-8px) var(--space-md-16px);
|
padding: var(--space-sm-8px) var(--space-md-16px);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
@@ -134,3 +158,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-and-link-container a {
|
||||||
|
font-size: var(--font-desktop-sm);
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: var(--line-height-desktop-sm);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user