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-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>
<h4>$100.000 COP</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Repudiandae sapiente optio, quisquam ea
placeat architecto dicta, suscipit quasi
necessitatibus neque.
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>Características</h6>
<h6>Este plan incluye:</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>
<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="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 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>
<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.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Repudiandae sapiente optio,
quisquam ea placeat architecto dicta, suscipit
quasi necessitatibus neque.
</p>
</div>
@@ -138,22 +161,30 @@ import "../styles/index.css";
<li>Característica #5 del plan</li>
</ul>
</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">
<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>
<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.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Repudiandae sapiente optio,
quisquam ea placeat architecto dicta, suscipit
quasi necessitatibus neque.
</p>
</div>
@@ -167,10 +198,17 @@ import "../styles/index.css";
<li>Característica #5 del plan</li>
</ul>
</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>

42
src/styles/index.css
View File

@@ -2,7 +2,7 @@
display: flex;
overflow-x: hidden;
flex-direction: column;
gap: 220px;
gap: 140px;
background-color: transparent;
}
@@ -78,16 +78,33 @@
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-2xl-48px);
height: 600px;
min-height: 650px;
width: 380px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
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 {
border: 4px solid #e54c75;
height: 620px;
height: 680px;
}
.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 {
height: 42px;
width: auto;
width: 100%;
padding: var(--space-sm-8px) var(--space-md-16px);
border: none;
border-radius: 16px;
@@ -134,3 +158,13 @@
display: flex;
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;
}