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

Started adding information ton pricing cards in home page

Browse Source
This commit is contained in:
Juan Diego Moreno Upegui
2026-02-02 17:37:30 -05:00
parent 438ffa3282
commit 64309e8813
2 changed files with 142 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/index.astro
View File

@@ -87,44 +87,67 @@ 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>
<div class="features-container"> <div class="features-container">
<h6>Características</h6> <h6>Este plan incluye:</h6>
<ul> <ul>
<li>Característica #1 del plan</li> <li>Roles y permisos</li>
<li>Característica #2 del plan</li> <li>Administración de Clientes</li>
<li>Característica #3 del plan</li> <li>Administración de Proveedores</li>
<li>Característica #4 del plan</li> <li>Productos/Servicios</li>
<li>Característica #5 del plan</li> <li>Contabilidad</li>
</ul> </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="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"
>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>
@@ -138,22 +161,30 @@ import "../styles/index.css";
<li>Característica #5 del plan</li> <li>Característica #5 del plan</li>
</ul> </ul>
</div> </div>
</div>
<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"
>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>
@@ -167,10 +198,17 @@ import "../styles/index.css";
<li>Característica #5 del plan</li> <li>Característica #5 del plan</li>
</ul> </ul>
</div> </div>
</div>
<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"
>Conoce a detalle todos los planes</a
>
</div>
</div> </div>
</div> </div>
</section> </section>

42
src/styles/index.css
View File

@@ -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;
}